From d0a016c27f35f18f0f85f31eead649bb97e844a2 Mon Sep 17 00:00:00 2001
From: Kakabay <kashyrberdyew@gmail.com>
Date: Tue, 24 Jan 2023 15:25:42 +0500
Subject: [PATCH] aside

---
 src/components/global/Aside.tsx        | 12 ++++++++++++
 src/components/global/SectionTitle.tsx |  9 +++++++++
 src/pages/News.tsx                     |  2 ++
 src/styles/_aside.scss                 |  6 ++++++
 src/styles/_news.scss                  |  4 ++--
 src/styles/style.scss                  |  1 +
 6 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 src/components/global/Aside.tsx
 create mode 100644 src/components/global/SectionTitle.tsx
 create mode 100644 src/styles/_aside.scss

diff --git a/src/components/global/Aside.tsx b/src/components/global/Aside.tsx
new file mode 100644
index 0000000..2a896fd
--- /dev/null
+++ b/src/components/global/Aside.tsx
@@ -0,0 +1,12 @@
+// Components
+import SectionTitle from './SectionTitle';
+
+const Aside = () => {
+  return (
+    <aside className="aside">
+      <SectionTitle title="Самое читаемое" />
+    </aside>
+  );
+};
+
+export default Aside;
diff --git a/src/components/global/SectionTitle.tsx b/src/components/global/SectionTitle.tsx
new file mode 100644
index 0000000..9089c0c
--- /dev/null
+++ b/src/components/global/SectionTitle.tsx
@@ -0,0 +1,9 @@
+interface Props {
+  title: string;
+}
+
+const SectionTitle = ({ title }: Props) => {
+  return <h1 className="title">{title}</h1>;
+};
+
+export default SectionTitle;
diff --git a/src/pages/News.tsx b/src/pages/News.tsx
index f5b9f1a..6d8431f 100644
--- a/src/pages/News.tsx
+++ b/src/pages/News.tsx
@@ -1,5 +1,6 @@
 // Components
 import NewsItem from '../components/news/NewsItem';
+import Aside from '../components/global/Aside';
 
 const News = () => {
   return (
@@ -7,6 +8,7 @@ const News = () => {
       <div className="container">
         <div className="news-inner">
           <NewsItem />
+          <Aside />
         </div>
       </div>
     </main>
diff --git a/src/styles/_aside.scss b/src/styles/_aside.scss
new file mode 100644
index 0000000..1c33cd5
--- /dev/null
+++ b/src/styles/_aside.scss
@@ -0,0 +1,6 @@
+.title {
+  font-size: 2.4rem;
+  color: $main;
+  border-bottom: 0.1rem solid $main;
+  padding: 0.8rem 2.4rem;
+}
diff --git a/src/styles/_news.scss b/src/styles/_news.scss
index c1e4785..ae4dd09 100644
--- a/src/styles/_news.scss
+++ b/src/styles/_news.scss
@@ -1,7 +1,7 @@
 .news-inner {
   display: grid;
-  grid-template-columns: 1fr minmax(60rem, 30rem);
-  gap: 4.8rem;
+  grid-template-columns: 1fr minmax(50rem, 30rem);
+  gap: 4rem;
   padding: 6.4rem 0;
 }
 
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 58dff6d..b7b0d3a 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -4,3 +4,4 @@
 @import './footer';
 @import './video';
 @import './news';
+@import './aside';