60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
"use client";
|
|
import { useState, useEffect } from "react";
|
|
import ItemTitle from "./ItemTitle";
|
|
import { request } from "@/services/response";
|
|
|
|
function Title({ onTagChange }) {
|
|
const [activeBtn, setActiveBtn] = useState(0);
|
|
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 : []
|
|
);
|
|
const uniqueNames = [...new Set(names)];
|
|
setTags(uniqueNames.map((name) => ({ name })));
|
|
} catch (error) {
|
|
console.error("Error fetching tags:", error);
|
|
setTags([]);
|
|
}
|
|
};
|
|
|
|
fetchTags();
|
|
}, []);
|
|
|
|
const handleTagClick = (idx, tagName) => {
|
|
setActiveBtn(idx);
|
|
if (onTagChange) {
|
|
onTagChange(tagName);
|
|
}
|
|
};
|
|
|
|
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}
|
|
key="all"
|
|
/>
|
|
{tags.map((tag, idx) => (
|
|
<ItemTitle
|
|
setActiveBtn={() => handleTagClick(idx + 1, tag.name)}
|
|
activeBtn={activeBtn}
|
|
name={tag.name}
|
|
idx={idx + 1}
|
|
key={tag.name}
|
|
/>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
export default Title;
|