Merge pull request #93 from SpaceyaTech/blog-admin-forms

add link to blogCard

src/APP/pages/blog/Blog.jsx

@@ -1,44 +1,44 @@
-import React from "react";
-import { useParams } from "react-router-dom";
-import BlogStats from "../blogs/sections/BlogStats";
-import BlogWrapper from "./sections/BlogWrapper";
-import useBlogData from "../../../hooks/Queries/blog/useBlogData";
-
-function Blog() {
-  const { id } = useParams();
-  const { data: blogData, isLoading, isError, isSuccess } = useBlogData(id);
-
-  return (
-    <>
-      {isError && <p>Error fetching blog details!</p>}
-      {isLoading && <p>Loading blog details...</p>}
-      {isSuccess && (
-        <section className="flex flex-col p-4 md:p-8 lg:p-10">
-          <img
-            src={blogData.image}
-            alt="blog"
-            className="w-full h-60 md:h-72 object-cover rounded-lg mb-4 md:mb-8"
-          />
-
-          <div className="flex flex-row items-center justify-between">
-            <p className="text-[#4C4D4D] text-sm  md:text-base font-bold">
-              {new Date(blogData.created_at).toLocaleDateString("en-US", {
-                year: "numeric",
-                month: "short",
-                day: "numeric",
-              })}
-            </p>
-
-            <BlogStats likes={blogData.likes} />
-          </div>
-
-          <BlogWrapper blog={blogData} />
-
-          {/* <RelatedBlogs /> */}
-        </section>
-      )}
-    </>
-  );
-}
-
-export default Blog;
+import React from "react";
+import { useParams } from "react-router-dom";
+import BlogWrapper from "./sections/BlogWrapper";
+import useBlogData from "../../../hooks/Queries/blog/useBlogData";
+
+function Blog() {
+  const { id } = useParams();
+  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 && (
+        <section className="flex flex-col p-4 md:p-8 lg:p-10">
+          <img
+            src={blogData.image}
+            alt="blog"
+            className="w-full h-60 md:h-72 object-cover rounded-lg mb-4 md:mb-8"
+          />
+
+          {/* <div className="flex flex-row items-center justify-between">
+            <p className="text-[#4C4D4D] text-sm  md:text-base font-bold">
+              {new Date(blogData.created_at).toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+              })}
+            </p>
+
+            <BlogStats likes={blogData.likes} />
+          </div> */}
+
+          <BlogWrapper blog={blogData} />
+
+          {/* <RelatedBlogs /> */}
+        </section>
+      )}
+    </section>
+  );
+}
+
+export default Blog;
+

src/APP/pages/blogs/sections/BlogCard.jsx

@@ -1,5 +1,8 @@
-import { useNavigate } from "react-router-dom";
-import { Ellipse30, arrowRight } from "../../../../assets/images/blogs-page";
+import { formatDistanceToNow } from "date-fns";
+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";
 import { formatDistanceToNow } from "date-fns";
 
@@ -9,7 +12,12 @@ const BlogCard = ({ blog }) => {
     addSuffix: true,
   });
   return (
-    <div className="flex flex-col items-start w-full">
+
+    <Link
+      to={`/blogs/${blog.id}`}
+      className="flex flex-col items-start w-full mb-6"
+    >
+
       <img
         src={blog.image}
         alt="blog"
@@ -55,7 +63,7 @@ const BlogCard = ({ blog }) => {
           </button>
         </div>
       </div>
-    </div>
+    </Link>
   );
 };