Refactor blog components for improved tag filtering and related content display

- Added `getBlogTagFacets` API call to fetch blog tags based on city scope.
- Updated `BlogsPage` to read selected tag from URL and handle tag changes with URL updates.
- Modified `Title` component to display tags from the new API and reflect active tag state.
- Enhanced breadcrumb navigation to link categories to their respective pages.
- Adjusted related content section to display articles from the same category and fixed layout issues.
- Corrected heading hierarchy across various components for better SEO compliance.
- Ensured consistent styling and spacing in related content items.

components/blogs/title/ItemTitle.js

@@ -1,11 +1,11 @@
 import { Button } from "@mui/material";
 
-function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
+function ItemTitle({ name, isActive, onSelect }) {
   return (
     <li>
       <Button
-        className={` !py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !shadow-none !rounded-[8px] !text-[14px] md:!text-[16px ${ activeBtn === idx ? "!bg-[#F17732] !text-[#FAFAFA]" : "!bg-[#F5F5F5] !text-[#3B3B3B]" } `}
-        onClick={() => setActiveBtn(idx)}
+        className={` !py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !shadow-none !rounded-[8px] !text-[14px] md:!text-[16px] !whitespace-nowrap ${ isActive ? "!bg-[#F17732] !text-[#FAFAFA]" : "!bg-[#F5F5F5] !text-[#3B3B3B]" } `}
+        onClick={onSelect}
         variant="contained"
         color="secondary"
       >

components/blogs/title/index.js

@@ -3,52 +3,42 @@ import { useState, useEffect } from "react";
 import ItemTitle from "./ItemTitle";
 import { request } from "@/services/response";
 
-function Title({ onTagChange }) {
-  const [activeBtn, setActiveBtn] = useState(0);
+function Title({ selectedTag, onTagChange, cityId }) {
   const [tags, setTags] = useState([]);
 
   useEffect(() => {
     const fetchTags = async () => {
       try {
-        // Blog tags are stored as names on each blog; build the chip list from
-        // the tag names actually present in published blogs.
-        const response = await request.getBlogs({ page: 1, limit: 50 });
-        const names = (response?.data || []).flatMap((b) =>
-          Array.isArray(b.tags) ? b.tags : []
+        // واژگان کامل تگ‌های مقالات منتشرشده در scope همین دامنه. استخراج از خودِ
+        // لیست مقاله‌ها ممکن نیست: سقف limit برابر ۵۰ است و مقاله‌ها بیشترند.
+        const response = await request.getBlogTagFacets(
+          cityId ? { city_id: cityId } : {}
         );
-        const uniqueNames = [...new Set(names)];
-        setTags(uniqueNames.map((name) => ({ name })));
+        setTags(response?.data || []);
       } catch (error) {
-        console.error("Error fetching tags:", error);
+        console.error("Error fetching blog tags:", error);
         setTags([]);
       }
     };
 
     fetchTags();
-  }, []);
+  }, [cityId]);
 
-  const handleTagClick = (idx, tagName) => {
-    setActiveBtn(idx);
-    if (onTagChange) {
-      onTagChange(tagName);
-    }
-  };
+  if (tags.length === 0) return null;
 
   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]">
       <ItemTitle
-        setActiveBtn={() => handleTagClick(0, null)}
-        activeBtn={activeBtn}
         name="همه"
-        idx={0}
+        isActive={!selectedTag}
+        onSelect={() => onTagChange(null)}
         key="all"
       />
-      {tags.map((tag, idx) => (
+      {tags.map((tag) => (
         <ItemTitle
-          setActiveBtn={() => handleTagClick(idx + 1, tag.name)}
-          activeBtn={activeBtn}
           name={tag.name}
-          idx={idx + 1}
+          isActive={selectedTag === tag.name}
+          onSelect={() => onTagChange(tag.name)}
           key={tag.name}
         />
       ))}