From d167019d761338e9df4f600aa47c7354c1b1c764 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Mon, 7 Oct 2024 15:00:49 +0330
Subject: [PATCH] blog Categories is linked to post page

---
 .../Categories.tsx}                           | 40 +++++++++++++------
 src/app/(routes)/blog/page.tsx                |  4 +-
 2 files changed, 30 insertions(+), 14 deletions(-)
 rename src/app/(routes)/blog/components/home/{reading-lists/readingList.tsx => Categories/Categories.tsx} (66%)

diff --git a/src/app/(routes)/blog/components/home/reading-lists/readingList.tsx b/src/app/(routes)/blog/components/home/Categories/Categories.tsx
similarity index 66%
rename from src/app/(routes)/blog/components/home/reading-lists/readingList.tsx
rename to src/app/(routes)/blog/components/home/Categories/Categories.tsx
index 4760f43..593795c 100644
--- a/src/app/(routes)/blog/components/home/reading-lists/readingList.tsx
+++ b/src/app/(routes)/blog/components/home/Categories/Categories.tsx
@@ -1,11 +1,12 @@
 import Image from "next/image";
+import Link from "next/link";
 
-export default function ReadingList() {
+export default function Categories() {
   return (
     <div className="mb-5 flex w-full max-w-[95%] flex-wrap gap-10">
       <div className="flex w-full items-center justify-between">
         <h2 className="text-[36px] font-[700] text-blog-text-default">
-          ReadingList
+          Categories
         </h2>
         <p className="text-[16px] font-[400] text-blog-text-passive">
           View all
@@ -13,7 +14,10 @@ export default function ReadingList() {
       </div>
 
       <div className="flex w-full flex-wrap items-center justify-center gap-5">
-        <div className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]">
+        <Link
+          href={"/blog/categories/UI Design"}
+          className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
+        >
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-1.jpg"}
@@ -25,9 +29,12 @@ export default function ReadingList() {
           <h3 className="text-[24px] font-[600] text-blog-text-default">
             UI Design
           </h3>
-        </div>
+        </Link>
 
-        <div className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]">
+        <Link
+          href={"/blog/categories/UX design"}
+          className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
+        >
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-2.jpg"}
@@ -39,9 +46,12 @@ export default function ReadingList() {
           <h3 className="text-[24px] font-[600] text-blog-text-default">
             UX design
           </h3>
-        </div>
+        </Link>
 
-        <div className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]">
+        <Link
+          href={"/blog/categories/SEO"}
+          className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
+        >
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-3.jpg"}
@@ -51,9 +61,12 @@ export default function ReadingList() {
             />
           </div>
           <h3 className="text-[24px] font-[600] text-blog-text-default">SEO</h3>
-        </div>
+        </Link>
 
-        <div className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]">
+        <Link
+          href={"/blog/categories/Popular"}
+          className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
+        >
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-4.jpg"}
@@ -65,9 +78,12 @@ export default function ReadingList() {
           <h3 className="text-[24px] font-[600] text-blog-text-default">
             Popular
           </h3>
-        </div>
+        </Link>
 
-        <div className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]">
+        <Link
+          href={"/blog/categories/Essentials"}
+          className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
+        >
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-5.jpg"}
@@ -79,7 +95,7 @@ export default function ReadingList() {
           <h3 className="text-[24px] font-[600] text-blog-text-default">
             Essentials
           </h3>
-        </div>
+        </Link>
 
         {/* <div className="center-center hidden h-full w-[80px] rounded-md bg-white lg:flex">
           <Image
diff --git a/src/app/(routes)/blog/page.tsx b/src/app/(routes)/blog/page.tsx
index ac5fb07..11784d5 100644
--- a/src/app/(routes)/blog/page.tsx
+++ b/src/app/(routes)/blog/page.tsx
@@ -1,13 +1,13 @@
 import FilteredPosts from "./components/home/filtered-posts/filteredPosts";
 import New from "./components/home/new/new";
 import Random from "./components/home/random/random";
-import ReadingList from "./components/home/reading-lists/readingList";
+import Categories from "./components/home/Categories/Categories";
 
 export default async function Blog() {
   return (
     <div className="flex w-[1280px] flex-col items-center gap-[50px] md:gap-[100px]">
       <New />
-      <ReadingList />
+      <Categories />
       <FilteredPosts />
       <Random />
     </div>