most read

src/App.tsx

@@ -20,7 +20,7 @@ const App = () => {
       <Header />
       <Routes>
         <Route path="/" element={<Main />} />
-        <Route path="/news" element={<News />} />
+        <Route path="/news/:id" element={<News />} />
       </Routes>
       <Video />
       <Footer />

src/components/aside/AsideItem.tsx

@@ -1,3 +1,6 @@
+// Modules
+import { Link } from 'react-router-dom';
+
 interface Props {
   title: string;
   category: string;
@@ -5,10 +8,10 @@ interface Props {
 
 const AsideItem = ({ title, category }: Props) => {
   return (
-    <div className="aside-item">
+    <Link to="/news/1" className="aside-item">
       <h3 className="aside-item-category">{category}</h3>
       <h2 className="aside-item-title">{title}</h2>
-    </div>
+    </Link>
   );
 };
 

src/pages/News.tsx

@@ -1,8 +1,13 @@
+// Modules
+import { useParams } from 'react-router-dom';
+
 // Components
 import NewsItem from '../components/news/NewsItem';
 import Aside from '../components/global/Aside';
 
 const News = () => {
+  const { id } = useParams<string>();
+  console.log(`News id: ${id}`);
   return (
     <main className="news">
       <div className="container">

src/styles/_aside.scss

@@ -10,6 +10,10 @@
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
+  position: sticky;
+  top: 2rem;
+  left: 0;
+  height: fit-content;
 }
 
 .aside-scroll {
@@ -32,6 +36,6 @@
 }
 
 .aside-item-category {
-  font-weight: 700;
+  font-weight: bold;
   font-size: 1rem;
 }

src/styles/_news.scss

@@ -42,6 +42,7 @@
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
-  font-size: 1.8rem;
+  font-size: 1.6rem;
   line-height: 2.2rem;
+  color: $black;
 }