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

components/blog/relatedContent/Item.js

@@ -1,30 +1,39 @@
 import CircularLoading from "@/app/component/loading/Circular";
 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 { convertTimestampToJalali } from "@/helper";
 
 function Item({ data, idx, loading }) {
+  const imageUrl = data?.images?.[0]?.url;
+  const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";
+
   return (
     <li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
       <CustomLoading width={80} height={72} loading={loading}>
-        <Link href={`/blog/${data.id}`}>
-          <Image
-            className="
-                        min-w-[64px] sm:min-w-[73px] md:min-w-[85px] lg:min-w-[97px] 
-                        min-h-[56px] sm:min-h-[64px] md:min-h-[75px] lg:min-h-[88px] 
+        <Link href={`/blog/${data.uuid}`}>
+          {imageUrl && imageUrl.trim() !== "" ? (
+            <img
+              className="
+                        w-[64px] sm:w-[73px] md:w-[85px] lg:w-[97px] 
+                        h-[56px] sm:h-[64px] md:h-[75px] lg:h-[88px] 
                         rounded-[8px] overflow-hidden object-cover
                     "
-            src={data.src}
-            alt="article"
-            height={88}
-            width={97}
-          />
+              src={imageUrl}
+              alt={data.title || "article"}
+            />
+          ) : (
+            <div className="
+                        w-[64px] sm:w-[73px] md:w-[85px] lg:w-[97px] 
+                        h-[56px] sm:h-[64px] md:h-[75px] lg:h-[88px] 
+                        rounded-[8px] overflow-hidden bg-gray-200
+                    "></div>
+          )}
         </Link>
       </CustomLoading>
       <div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
         <TextLoading width={150} height={18} loading={loading}>
-          <Link href={`/blog/${data.id}`}>
+          <Link href={`/blog/${data.uuid}`}>
             <h2 className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap">
               {data.title}
             </h2>
@@ -32,11 +41,11 @@ function Item({ data, idx, loading }) {
         </TextLoading>
         <TextLoading width={110} height={18} loading={loading}>
           <p className="text-[#9B9B9B] text-[12px] text-nowrap font-normal">
-            تاریخ انتشار: {data.date_of_release}
+            {createdDate && `تاریخ انتشار: ${createdDate}`}
           </p>
         </TextLoading>
       </div>
-      {data.id > idx + 1 && (
+      {idx > 0 && (
         <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
       )}
     </li>