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

components/blog/detail/Caption.js

@@ -1,33 +1,23 @@
-import Image from "next/image";
 import React from "react";
 
 function Caption({ data }) {
+  const imageUrl = data?.images?.[0]?.url;
+
   return (
     <>
-      <Image
-        className="rounded-[8px] overflow-hidden w-full"
-        src={data?.cover_first}
-        alt="cover-blog"
-        height={570}
-        width={808}
-      />
-      <div>
+      {imageUrl && imageUrl.trim() !== "" && (
+        <img
+          className="rounded-[8px] overflow-hidden w-full object-cover"
+          src={imageUrl}
+          alt={data?.title || "blog cover"}
+        />
+      )}
+      {data?.body?.value && (
         <div
           className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-          dangerouslySetInnerHTML={{ __html: "data?.caption" }}
+          dangerouslySetInnerHTML={{ __html: data.body.value }}
         />
-      </div>
-      <Image
-        className="rounded-[8px] overflow-hidden w-full"
-        src={data?.cover_second}
-        alt="cover-blog"
-        height={570}
-        width={808}
-      />
-      <div
-        className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-        dangerouslySetInnerHTML={{ __html: "data?.caption" }}
-      />
+      )}
     </>
   );
 }

components/blog/detail/index.js

@@ -7,7 +7,7 @@ function Detail({ data }) {
     <div className="w-full lg:w-[68%]">
       <Caption data={data} />
       <SocialMedia />
-      <CommentUser data={data} loading={false} />
+      {/* <CommentUser data={data} loading={false} /> */}
     </div>
   );
 }