refactor: apply consistent formatting to improve code quality

Ensure uniform code formatting across components by aligning with the established code style. Adjust imports, indentation, and spacing to enhance readability and maintainability.

frontend/src/app/(dashboard)/category/[slug]/page.tsx

@@ -1,31 +1,30 @@
-import * as React from "react";
 import type { Metadata } from "next";
 import { CategoryContent } from "@/components/category-content";
 import { CategoryService } from "@/services/category.service";
 
-export async function generateMetadata({ 
-  params 
-}: { 
-  params: Promise<{ slug: string }> 
+export async function generateMetadata({
+	params,
+}: {
+	params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
-  const { slug } = await params;
-  try {
-    const categories = await CategoryService.getAll();
-    const category = categories.find(c => c.slug === slug);
-    return {
-      title: `${category?.name || slug} | MemeGoat`,
-      description: `Découvrez tous les mèmes de la catégorie ${category?.name || slug} sur MemeGoat.`,
-    };
-  } catch (error) {
-    return { title: `Catégorie : ${slug} | MemeGoat` };
-  }
+	const { slug } = await params;
+	try {
+		const categories = await CategoryService.getAll();
+		const category = categories.find((c) => c.slug === slug);
+		return {
+			title: `${category?.name || slug} | MemeGoat`,
+			description: `Découvrez tous les mèmes de la catégorie ${category?.name || slug} sur MemeGoat.`,
+		};
+	} catch (_error) {
+		return { title: `Catégorie : ${slug} | MemeGoat` };
+	}
 }
 
-export default async function CategoryPage({ 
-  params 
-}: { 
-  params: Promise<{ slug: string }> 
+export default async function CategoryPage({
+	params,
+}: {
+	params: Promise<{ slug: string }>;
 }) {
-  const { slug } = await params;
-  return <CategoryContent slug={slug} />;
+	const { slug } = await params;
+	return <CategoryContent slug={slug} />;
 }

frontend/src/app/(dashboard)/category/page.tsx

@@ -1,54 +1,54 @@
 "use client";
 
-import * as React from "react";
+import { LayoutGrid } from "lucide-react";
 import Link from "next/link";
+import * as React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { CategoryService } from "@/services/category.service";
 import type { Category } from "@/types/content";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { LayoutGrid } from "lucide-react";
 
 export default function CategoriesPage() {
-  const [categories, setCategories] = React.useState<Category[]>([]);
-  const [loading, setLoading] = React.useState(true);
+	const [categories, setCategories] = React.useState<Category[]>([]);
+	const [loading, setLoading] = React.useState(true);
 
-  React.useEffect(() => {
-    CategoryService.getAll()
-      .then(setCategories)
-      .finally(() => setLoading(false));
-  }, []);
+	React.useEffect(() => {
+		CategoryService.getAll()
+			.then(setCategories)
+			.finally(() => setLoading(false));
+	}, []);
 
-  return (
-    <div className="max-w-4xl mx-auto py-8 px-4">
-      <div className="flex items-center gap-2 mb-8">
-        <LayoutGrid className="h-6 w-6" />
-        <h1 className="text-3xl font-bold">Catégories</h1>
-      </div>
+	return (
+		<div className="max-w-4xl mx-auto py-8 px-4">
+			<div className="flex items-center gap-2 mb-8">
+				<LayoutGrid className="h-6 w-6" />
+				<h1 className="text-3xl font-bold">Catégories</h1>
+			</div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-        {loading ? (
-          Array.from({ length: 6 }).map((_, i) => (
-            <Card key={i} className="animate-pulse">
-              <CardHeader className="h-24 bg-zinc-100 dark:bg-zinc-800 rounded-t-lg" />
-              <CardContent className="h-12" />
-            </Card>
-          ))
-        ) : (
-          categories.map((category) => (
-            <Link key={category.id} href={`/category/${category.slug}`}>
-              <Card className="hover:border-primary transition-colors cursor-pointer group h-full">
-                <CardHeader className="bg-zinc-50 dark:bg-zinc-900 group-hover:bg-primary/5 transition-colors">
-                  <CardTitle className="text-lg">{category.name}</CardTitle>
-                </CardHeader>
-                <CardContent className="pt-4">
-                  <p className="text-sm text-muted-foreground">
-                    {category.description || `Découvrez tous les mèmes de la catégorie ${category.name}.`}
-                  </p>
-                </CardContent>
-              </Card>
-            </Link>
-          ))
-        )}
-      </div>
-    </div>
-  );
+			<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+				{loading
+					? Array.from({ length: 6 }).map((_, i) => (
+							/* biome-ignore lint/suspicious/noArrayIndexKey: skeleton items don't have unique IDs */
+							<Card key={`skeleton-${i}`} className="animate-pulse">
+								<CardHeader className="h-24 bg-zinc-100 dark:bg-zinc-800 rounded-t-lg" />
+								<CardContent className="h-12" />
+							</Card>
+						))
+					: categories.map((category) => (
+							<Link key={category.id} href={`/category/${category.slug}`}>
+								<Card className="hover:border-primary transition-colors cursor-pointer group h-full">
+									<CardHeader className="bg-zinc-50 dark:bg-zinc-900 group-hover:bg-primary/5 transition-colors">
+										<CardTitle className="text-lg">{category.name}</CardTitle>
+									</CardHeader>
+									<CardContent className="pt-4">
+										<p className="text-sm text-muted-foreground">
+											{category.description ||
+												`Découvrez tous les mèmes de la catégorie ${category.name}.`}
+										</p>
+									</CardContent>
+								</Card>
+							</Link>
+						))}
+			</div>
+		</div>
+	);
 }