From d2e8407a0374cd2b8ce87d93ff965ef6bbe1075b Mon Sep 17 00:00:00 2001
From: Kakabay <kashyrberdyew@gmail.com>
Date: Mon, 30 Jan 2023 18:17:30 +0500
Subject: [PATCH] News component finished

---
 src/components/news/News.tsx | 40 ++++++++++++++++++++++++++++++++
 src/styles/_news.scss        | 45 ++++++++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 src/components/news/News.tsx
 create mode 100644 src/styles/_news.scss

diff --git a/src/components/news/News.tsx b/src/components/news/News.tsx
new file mode 100644
index 0000000..c715b18
--- /dev/null
+++ b/src/components/news/News.tsx
@@ -0,0 +1,40 @@
+// Modules
+import { Link } from 'react-router-dom';
+// Images
+import placeholder from '../../assets/images/placeholder.jpg';
+import { ReactComponent as ArrRight } from '../../assets/icons/arrow-right.svg';
+import NewsCategory from '../global/NewsCategory';
+import NewsDate from '../global/NewsDate';
+
+const News = () => {
+  return (
+    <div className="news">
+      <div className="news-wrapper">
+        <div className="news-image">
+          <img src={placeholder} alt="img" />
+        </div>
+        <div className="news-info">
+          <div className="news-info-inner">
+            <h2 className="news-title">
+              Президент Туркменистана провёл рабочее совещание по цифровой системе
+            </h2>
+            <div className="news-status">
+              <NewsCategory title="политика" link="" />
+              <NewsDate date="12.01.2023" />
+            </div>
+            <div className="news-text">
+              Государственному объединению «Türkmen atlary» разрешено заключить дополнительное
+              соглашение с ИП «Röwşen». Государственному объединению «Türkmen atlary» разрешено
+              заключить дополнительное соглашение с ИП «Röwşen»
+            </div>
+          </div>
+          <Link to="/" className="news-link">
+            <span>прочитать все</span> <ArrRight />
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default News;
diff --git a/src/styles/_news.scss b/src/styles/_news.scss
new file mode 100644
index 0000000..1a4d6fc
--- /dev/null
+++ b/src/styles/_news.scss
@@ -0,0 +1,45 @@
+.news-wrapper {
+  display: flex;
+  // align-items: center;
+  gap: 1.6rem;
+}
+
+.news-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.news-info-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+}
+
+.news-title {
+  font-size: 2.4rem;
+  font-weight: 700;
+  @include raleway;
+}
+
+.news-status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.news-category {
+  display: inline-block;
+  color: $main;
+  text-transform: uppercase;
+  font-weight: 400;
+  font-size: 1.4rem;
+  @include roboto;
+}
+
+.news-text {
+  font-size: 1.4rem;
+  font-weight: 400;
+  color: $body;
+}