Merge branch 'main' into new-resources-page-build

SpaceyaTech · Feb 29, 2024 · f275dfc · f275dfc
2 parents 1d2ee56 + e3acef5
commit f275dfc
Show file tree

Hide file tree

Showing 7 changed files with 347 additions and 434 deletions.
diff --git a/src/APP/pages/blog/sections/RelatedBlogCard.jsx b/src/APP/pages/blog/sections/RelatedBlogCard.jsx
@@ -0,0 +1,75 @@
+/* eslint-disable react/prop-types */
+import { formatDistanceToNow } from "date-fns";
+import React from "react";
+import { useNavigate, Link } from "react-router-dom";
+
+import { arrowRight } from "../../../../assets/images/blogs-page";
+import logo from "../../../../assets/images/sytLogo.png";
+import { BlogStats } from "../../blogs/sections";
+
+function RelatedBlogCard({ blog }) {
+  const navigate = useNavigate();
+
+  const timeAgo =
+    blog?.created_at &&
+    formatDistanceToNow(new Date(blog?.created_at), {
+      addSuffix: true,
+    });
+
+  return (
+    <Link
+      to={`/blogs/${blog.title_slug}`}
+      className="flex flex-col items-start w-full mb-5"
+    >
+      <img
+        src={`https://apis.spaceyatech.com/${blog.image}`}
+        alt={blog.title}
+        className="w-full h-60 object-cover rounded-lg"
+      />
+
+      <div className="py-[6px] flex flex-col gap-[10px] w-full mt-2">
+        <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 <= 1 ? "" : blog.likes} />
+        </div>
+
+        <p className="text-base font-normal leading-6 text-[#4C4D4D] line-clamp-3">
+          {blog.description}
+        </p>
+
+        <div className="flex flex-row items-start justify-between">
+          <div className="flex gap-[10px]">
+            <img
+              src={logo}
+              alt="icon"
+              className="w-10 h-10 object-cover bg-gray-200 flex items-center justify-center p-1 rounded-full"
+            />
+
+            <div className="flex flex-col gap-1 text-sm">
+              <h4 className="capitalize font-medium text-[#323433]">
+                {blog.author}
+              </h4>
+              <span className="text-[#656767]">{timeAgo}</span>
+            </div>
+          </div>
+
+          <button
+            type="button"
+            className="flex gap-2 items-center justify-between"
+            onClick={() => {
+              navigate(`/blogs/${blog.title_slug}`);
+            }}
+          >
+            <span className="uppercase text-primary text-sm font-medium m-0">
+              read more
+            </span>
+            <img src={arrowRight} alt="arrow-right" className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+export default RelatedBlogCard;
diff --git a/src/APP/pages/blog/sections/RelatedBlogs.jsx b/src/APP/pages/blog/sections/RelatedBlogs.jsx
@@ -1,60 +1,61 @@
-import { useEffect } from "react";
-import { useParams } from "react-router-dom";
-import { useRelatedBlogsData } from "../../../../hooks/Queries/blog/useBlogData";
-import BlogCard from "../../blogs/sections/BlogCard";
-import { filterRelatedBlogs } from "../../../../utilities/FilterBlogs";
-
-function RelatedBlogs({ blogId, categoryId }) {
-  const { title_slug } = useParams();
-
-  const {
-    data: relatedBlogsData,
-    refetch: refetchRelatedBlogsData,
-    isLoading,
-    isError,
-    isSuccess,
-  } = useRelatedBlogsData(categoryId);
-
-  useEffect(() => {
-    refetchRelatedBlogsData();
-  }, [title_slug]);
-
-  const filteredRelatedBlogs = filterRelatedBlogs(
-    relatedBlogsData?.blogs,
-    title_slug
-  );
-
-  return (
-    <>
-      {isError && <p>Error loading blogs!</p>}
-      {isLoading && <p>Loading blogs...</p>}
-
-      {isSuccess && filteredRelatedBlogs.length > 0 && (
-        <>
-          <h2 className="text-2xl text-gray-500 font-semibold underline decoration-green-600 underline-offset-2">
-            {filteredRelatedBlogs.length > 1
-              ? "Related Articles"
-              : "Related Article"}
-          </h2>
-          <div className="grid sm:grid-cols-2 gap-16 grid-cols-1 py-16">
-            {Array.isArray(filteredRelatedBlogs) &&
-            filteredRelatedBlogs.length > 0 ? (
-              filteredRelatedBlogs
-                .filter(function (blog) {
-                  if (blog.id === blogId) {
-                    return false;
-                  }
-                  return true;
-                })
-                .map((blog) => <BlogCard key={blog.id} blog={blog} />)
-            ) : (
-              <p className="text-lg italic">No related blogs found!</p>
-            )}
-          </div>
-        </>
-      )}
-    </>
-  );
-}
-
-export default RelatedBlogs;
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+
+import { useRelatedBlogsData } from "../../../../hooks/Queries/blog/useBlogData";
+import { filterRelatedBlogs } from "../../../../utilities/FilterBlogs";
+import RelatedBlogCard from "./RelatedBlogCard";
+
+function RelatedBlogs({ blogId, categoryId }) {
+  const { titleSlug } = useParams();
+
+  const {
+    data: relatedBlogsData,
+    refetch: refetchRelatedBlogsData,
+    isLoading,
+    isError,
+    isSuccess,
+  } = useRelatedBlogsData(categoryId);
+
+  useEffect(() => {
+    refetchRelatedBlogsData();
+  }, [refetchRelatedBlogsData, titleSlug]);
+
+  const filteredRelatedBlogs = filterRelatedBlogs(
+    relatedBlogsData?.blogs,
+    titleSlug
+  );
+
+  return (
+    <>
+      {isError && <p>Error loading blogs!</p>}
+      {isLoading && <p>Loading blogs...</p>}
+
+      {isSuccess && filteredRelatedBlogs.length > 0 && (
+        <>
+          <h2 className="text-2xl text-black font-semibold underline decoration-green-600 underline-offset-2">
+            {filteredRelatedBlogs.length > 1
+              ? "Related Articles"
+              : "Related Article"}
+          </h2>
+          <div className="grid sm:grid-cols-2 gap-16 grid-cols-1 py-16">
+            {Array.isArray(filteredRelatedBlogs) &&
+            filteredRelatedBlogs.length > 0 ? (
+              filteredRelatedBlogs
+                .filter(function (blog) {
+                  if (blog.id === blogId) {
+                    return false;
+                  }
+                  return true;
+                })
+                .map((blog) => <RelatedBlogCard key={blog.id} blog={blog} />)
+            ) : (
+              <p className="text-lg italic">No related blogs found!</p>
+            )}
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+export default RelatedBlogs;
diff --git a/src/APP/pages/blogs/sections/BlogCard.jsx b/src/APP/pages/blogs/sections/BlogCard.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
+import { formatDistanceToNow } from "date-fns";
 import React from "react";
 import { useNavigate, Link } from "react-router-dom";
-import { formatDistanceToNow } from "date-fns";
 
 import { arrowRight } from "../../../../assets/images/blogs-page";
 import logo from "../../../../assets/images/sytLogo.png";
@@ -23,7 +23,7 @@ function BlogCard({ blog }) {
     >
       <img
         src={blog.image}
-        alt="blog"
+        alt={blog.title}
         className="w-full h-60 object-cover rounded-lg"
       />