refactor: enhance blog functionality with related blogs fetching, improved loading states, and tag filtering

components/blogs/Head.js

@@ -1,76 +1,110 @@
+"use client";
+import { useState, useEffect } from "react";
 import CustomLoading from "@/app/component/loading/Custom";
 import TextLoading from "@/app/component/loading/Text";
-import Image from "next/image";
 import Link from "next/link";
+import { request } from "@/services/response";
 
 function Head() {
+  const [topBlogs, setTopBlogs] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchTopBlogs = async () => {
+      try {
+        setIsLoading(true);
+        const response = await request.getTopBlogs();
+        setTopBlogs(response || []);
+      } catch (error) {
+        console.error("Error fetching top blogs:", error);
+        setTopBlogs([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchTopBlogs();
+  }, []);
+
+  if (isLoading || topBlogs.length === 0) {
+    return null;
+  }
+
+  const [firstBlog, secondBlog, thirdBlog, fourthBlog] = topBlogs;
+
   return (
+    <>{/*
     <div className="flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
-      <Link href="#" className="w-full lg:w-1/2 cover-head-blogs">
-        <CustomLoading width="full" height={400}>
-          <Image
-            src="/assets/images/head-blogs-1.png"
-            width={600}
-            height={424}
-            alt="head blog"
-          />
-        </CustomLoading>
-        <TextLoading width={150} height={20}>
-          <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
-            روش های خانگی محافظت از پوست در تابستان
-          </p>
-        </TextLoading>
-      </Link>
-      <div className="w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
-        <div className="w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
-          <Link href="#" className="w-full cover-head-blogs">
-            <CustomLoading width="full" height={180}>
-              <Image
-                src="/assets/images/head-blogs-2.png"
-                width={600}
-                height={424}
-                alt="head blog"
-              />
-            </CustomLoading>
-            <TextLoading width={150} height={20}>
-              <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
-                فواید نوشیدن آب برای سلامتی
-              </p>
-            </TextLoading>
-          </Link>
-          <Link href="#" className="w-full cover-head-blogs">
-            <CustomLoading width="full" height={180}>
-              <Image
-                src="/assets/images/head-blogs-3.png"
-                width={600}
-                height={424}
-                alt="head blog"
-              />
-            </CustomLoading>
-            <TextLoading width={150} height={20}>
-              <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
-                راهکارهای ساده برای درمان سر درد
-              </p>
-            </TextLoading>
-          </Link>
-        </div>
-        <Link href="#" className="w-full cover-head-blogs">
-          <CustomLoading width="full" height={180}>
-            <Image
-              src="/assets/images/head-blogs-4.png"
-              width={600}
-              height={424}
-              alt="head blog"
+      {firstBlog && (
+        <Link href={`/blog/${firstBlog.uuid}`} className="w-full lg:w-1/2 cover-head-blogs">
+          <CustomLoading width="full" height={400}>
+            <img
+              src={firstBlog.images?.[0]?.url || "/assets/images/head-blogs-1.png"}
+              alt={firstBlog.title || "head blog"}
+              className="w-full h-full object-cover"
             />
           </CustomLoading>
           <TextLoading width={150} height={20}>
             <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
-              تغذیه مناسب برای کاهش فشار خون
+              {firstBlog.title}
             </p>
           </TextLoading>
         </Link>
+      )}
+      <div className="w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
+        <div className="w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
+          {secondBlog && (
+            <Link href={`/blog/${secondBlog.uuid}`} className="w-full cover-head-blogs">
+              <CustomLoading width="full" height={180}>
+                <img
+                  src={secondBlog.images?.[0]?.url || "/assets/images/head-blogs-2.png"}
+                  alt={secondBlog.title || "head blog"}
+                  className="w-full h-full object-cover"
+                />
+              </CustomLoading>
+              <TextLoading width={150} height={20}>
+                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
+                  {secondBlog.title}
+                </p>
+              </TextLoading>
+            </Link>
+          )}
+          {thirdBlog && (
+            <Link href={`/blog/${thirdBlog.uuid}`} className="w-full cover-head-blogs">
+              <CustomLoading width="full" height={180}>
+                <img
+                  src={thirdBlog.images?.[0]?.url || "/assets/images/head-blogs-3.png"}
+                  alt={thirdBlog.title || "head blog"}
+                  className="w-full h-full object-cover"
+                />
+              </CustomLoading>
+              <TextLoading width={150} height={20}>
+                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
+                  {thirdBlog.title}
+                </p>
+              </TextLoading>
+            </Link>
+          )}
+        </div>
+        {fourthBlog && (
+          <Link href={`/blog/${fourthBlog.uuid}`} className="w-full cover-head-blogs">
+            <CustomLoading width="full" height={180}>
+              <img
+                src={fourthBlog.images?.[0]?.url || "/assets/images/head-blogs-4.png"}
+                alt={fourthBlog.title || "head blog"}
+                className="w-full h-full object-cover"
+              />
+            </CustomLoading>
+            <TextLoading width={150} height={20}>
+              <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
+                {fourthBlog.title}
+              </p>
+            </TextLoading>
+          </Link>
+        )}
       </div>
     </div>
+    */}</>
   );
 }