From 84cb684eabd9d84f094a2d82e37565d12ebc09f5 Mon Sep 17 00:00:00 2001
From: felixNyalenda <felixasejunior@gmail.com>
Date: Thu, 28 Dec 2023 21:17:30 +0300
Subject: [PATCH] add link to blogCard

---
 src/APP/pages/blog/Blog.jsx               | 4 ++--
 src/APP/pages/blogs/sections/BlogCard.jsx | 9 ++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/APP/pages/blog/Blog.jsx b/src/APP/pages/blog/Blog.jsx
index 95eb46ee..ac4ea6fc 100644
--- a/src/APP/pages/blog/Blog.jsx
+++ b/src/APP/pages/blog/Blog.jsx
@@ -8,7 +8,7 @@ function Blog() {
   const { data: blogData, isLoading, isError, isSuccess } = useBlogData(id);
 
   return (
-    <>
+    <section className=" max-w-[1440px] mx-auto">
       {isError && <p>Error fetching blog details!</p>}
       {isLoading && <p>Loading blog details...</p>}
       {isSuccess && (
@@ -36,7 +36,7 @@ function Blog() {
           {/* <RelatedBlogs /> */}
         </section>
       )}
-    </>
+    </section>
   );
 }
 
diff --git a/src/APP/pages/blogs/sections/BlogCard.jsx b/src/APP/pages/blogs/sections/BlogCard.jsx
index a96a8557..cbec2012 100644
--- a/src/APP/pages/blogs/sections/BlogCard.jsx
+++ b/src/APP/pages/blogs/sections/BlogCard.jsx
@@ -1,5 +1,5 @@
 import { formatDistanceToNow } from "date-fns";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
 import { arrowRight } from "../../../../assets/images/blogs-page";
 import logo from "../../../../assets/images/sytLogo.png";
 import BlogStats from "./BlogStats";
@@ -10,7 +10,10 @@ const BlogCard = ({ blog }) => {
     addSuffix: true,
   });
   return (
-    <div className="flex flex-col items-start w-full mb-6">
+    <Link
+      to={`/blogs/${blog.id}`}
+      className="flex flex-col items-start w-full mb-6"
+    >
       <img
         src={blog.image}
         alt="blog"
@@ -56,7 +59,7 @@ const BlogCard = ({ blog }) => {
           </button>
         </div>
       </div>
-    </div>
+    </Link>
   );
 };