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<Category[]>([]);
+	const [popularTags, setPopularTags] = React.useState<Tag[]>([]);
 	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() {
 								<div>
 									<h3 className="text-sm font-medium mb-3">Tags populaires</h3>
 									<div className="flex flex-wrap gap-2">
-										{["funny", "coding", "cat", "dog", "work", "relatable", "gaming"].map(
+										{popularTags.map((tag) => (
-											(tag) => (
 											<Badge
-													key={tag}
+												key={tag.id}
-													variant={searchParams.get("tag") === tag ? "default" : "outline"}
+												variant={
+													searchParams.get("tag") === tag.name ? "default" : "outline"
+												}
 												className="cursor-pointer"
 												onClick={() =>
-														updateSearch("tag", searchParams.get("tag") === tag ? null : tag)
+													updateSearch(
+														"tag",
+														searchParams.get("tag") === tag.name ? null : tag.name,
+													)
 												}
 											>
-													#{tag}
+												#{tag.name}
 											</Badge>
-											),
+										))}
+										{popularTags.length === 0 && (
+											<p className="text-xs text-muted-foreground">Aucun tag trouvé.</p>
 										)}
 									</div>
 								</div>