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

components/blogs/title/index.js

@@ -1,21 +1,53 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import ItemTitle from "./ItemTitle";
+import { request } from "@/services/response";
 
-const listTitle = ["سلامت روان", "پوست و مو", "کودک و نوجوان", "دارو", "تغذیه"];
-
-function Title() {
+function Title({ onTagChange }) {
   const [activeBtn, setActiveBtn] = useState(0);
+  const [tags, setTags] = useState([]);
+
+  useEffect(() => {
+    const fetchTags = async () => {
+      try {
+        const params = {
+          page: 1,
+          limit: 100,
+        };
+        const response = await request.getBlogTags(params);
+        setTags(response.data || []);
+      } catch (error) {
+        console.error("Error fetching tags:", error);
+        setTags([]);
+      }
+    };
+
+    fetchTags();
+  }, []);
+
+  const handleTagClick = (idx, tagId) => {
+    setActiveBtn(idx);
+    if (onTagChange) {
+      onTagChange(tagId);
+    }
+  };
 
   return (
     <ul className="flex w-full overflow-auto hidden-scroll items-center justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
-      {listTitle.map((name, idx) => (
+      <ItemTitle
+        setActiveBtn={() => handleTagClick(0, null)}
+        activeBtn={activeBtn}
+        name="همه"
+        idx={0}
+        key="all"
+      />
+      {tags.map((tag, idx) => (
         <ItemTitle
-          setActiveBtn={setActiveBtn}
+          setActiveBtn={() => handleTagClick(idx + 1, tag.id)}
           activeBtn={activeBtn}
-          name={name}
-          idx={idx}
-          key={idx}
+          name={tag.name}
+          idx={idx + 1}
+          key={tag.uuid}
         />
       ))}
     </ul>