aside

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;

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;

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>

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;
+}

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;
 }
 

src/styles/style.scss

@@ -4,3 +4,4 @@
 @import './footer';
 @import './video';
 @import './news';
+@import './aside';