diff --git a/frontend/src/components/mobile-filters.tsx b/frontend/src/components/mobile-filters.tsx index 0550bf3..af8c55b 100644 --- a/frontend/src/components/mobile-filters.tsx +++ b/frontend/src/components/mobile-filters.tsx @@ -16,7 +16,8 @@ import { SheetTrigger, } from "@/components/ui/sheet"; import { CategoryService } from "@/services/category.service"; -import type { Category } from "@/types/content"; +import { TagService } from "@/services/tag.service"; +import type { Category, Tag } from "@/types/content"; export function MobileFilters() { const router = useRouter(); @@ -24,12 +25,16 @@ export function MobileFilters() { const pathname = usePathname(); const [categories, setCategories] = React.useState([]); + const [popularTags, setPopularTags] = React.useState([]); const [query, setQuery] = React.useState(searchParams.get("query") || ""); const [open, setOpen] = React.useState(false); React.useEffect(() => { if (open) { CategoryService.getAll().then(setCategories).catch(console.error); + TagService.getAll({ limit: 10, sort: "popular" }) + .then(setPopularTags) + .catch(console.error); } }, [open]); @@ -127,19 +132,25 @@ export function MobileFilters() {

Tags populaires

- {["funny", "coding", "cat", "dog", "work", "relatable", "gaming"].map( - (tag) => ( - - updateSearch("tag", searchParams.get("tag") === tag ? null : tag) - } - > - #{tag} - - ), + {popularTags.map((tag) => ( + + updateSearch( + "tag", + searchParams.get("tag") === tag.name ? null : tag.name, + ) + } + > + #{tag.name} + + ))} + {popularTags.length === 0 && ( +

Aucun tag trouvé.

)}