remove the date published on blog

SpaceyaTech · Dec 14, 2023 · 5a612f0 · 5a612f0
1 parent 9c79910
commit 5a612f0
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 63 deletions.
diff --git a/src/APP/pages/blog/Blog.jsx b/src/APP/pages/blog/Blog.jsx
@@ -1,44 +1,43 @@
-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 (
+    <>
+      {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;
diff --git a/src/APP/pages/blog/sections/BlogWrapper.jsx b/src/APP/pages/blog/sections/BlogWrapper.jsx
@@ -1,5 +1,7 @@
 import React from "react";
 import { formatDistanceToNow } from "date-fns";
+import BlogStats from "../../blogs/sections/BlogStats";
+
 import logo from "../../../../assets/images/sytLogo.png";
 
 import "./blogWrapper.css";
@@ -17,20 +19,24 @@ const BlogWrapper = ({ blog }) => {
             {blog.title}
           </h3>
 
-          <div className="flex gap-[10px]">
-            <img
-              src={logo}
-              alt="icon"
-              className="w-10 h-10 object-cover rounded-full bg-gray-200 flex items-center justify-center p-1 rounded-full"
-            />
-
-            <div className="flex flex-col gap-1 text-sm">
-              <h4 className="font-medium text-[#323433] capitalize">
-                {blog.author}
-              </h4>
-
-              <span className="text-[#656767]">{timeAgo}</span>
+          <div className="flex items-center justify-between">
+            <div className="flex gap-2">
+              <img
+                src={logo}
+                alt="icon"
+                className="w-10 h-10 object-cover rounded-full bg-gray-200 flex items-center justify-center p-1"
+              />
+
+              <div className="flex flex-col text-sm">
+                <h4 className="font-medium text-[#323433] capitalize">
+                  {blog.author}
+                </h4>
+
+                <span className="text-[#656767] text-xs">{timeAgo}</span>
+              </div>
             </div>
+
+            <BlogStats likes={blog.likes} />
           </div>
         </div>
 

diff --git a/src/APP/pages/blogs/sections/BlogCard.jsx b/src/APP/pages/blogs/sections/BlogCard.jsx
@@ -1,8 +1,8 @@
+import { formatDistanceToNow } from "date-fns";
 import { useNavigate } from "react-router-dom";
-import logo from "../../../../assets/images/sytLogo.png";
 import { arrowRight } from "../../../../assets/images/blogs-page";
+import logo from "../../../../assets/images/sytLogo.png";
 import BlogStats from "./BlogStats";
-import { formatDistanceToNow } from "date-fns";
 
 const BlogCard = ({ blog }) => {
   const navigate = useNavigate();
@@ -21,7 +21,7 @@ const BlogCard = ({ blog }) => {
         <div className="flex flex-col lg:flex-row justify-between items-start gap-2">
           <h3 className="text-xl text-[#323433] font-semibold">{blog.title}</h3>
 
-          <BlogStats likes={blog.likes} />
+          <BlogStats likes={blog.likes <= 1 ? "" : blog.likes} />
         </div>
 
         <p className="text-base font-normal leading-6 flex flex-wrap text-[#4C4D4D] line-clamp-2">

diff --git a/src/APP/pages/blogs/sections/BlogStats.jsx b/src/APP/pages/blogs/sections/BlogStats.jsx
@@ -1,16 +1,25 @@
 import { thumbsUp } from "../../../../assets/images/blogs-page";
 
 const BlogStats = ({ likes }) => {
+  const handleLike = () => {
+    console.log("Clicked");
+  };
+
   return (
     <div className="flex flex-row items-center gap-2">
       {/* <div className="flex flex-row items-center gap-1">
         <img src={eye} alt="eye" className="w-5 h-5 object-cover" />
         <span className="text-base text-[#00664E]">240</span>
       </div> */}
 
-      <div className="flex flex-row items-center gap-1">
-        <img src={thumbsUp} alt="eye" className="w-5 h-5 object-cover" />
-        <span className="text-base text-[#00664E]">{likes}</span>
+      <div className="flex flex-row items-center gap-x-1">
+        <img
+          src={thumbsUp}
+          alt="eye"
+          className="w-5 h-5 object-cover cursor-pointer"
+          onClick={handleLike}
+        />
+        <span className="text-sm text-[#00664E] m-0">{likes}</span>
       </div>
 
       {/* <div className="flex flex-row items-center gap-1">