0b07320974
Added modular app routes including `login`, `dashboard`, `categories`, `trends`, and `upload`. Introduced reusable components such as `ContentList`, `ContentSkeleton`, and `AppSidebar` for improved UI consistency. Enhanced authentication with `AuthProvider` and implemented lazy loading, dynamic layouts, and infinite scrolling for better performance.
55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import Link from "next/link";
|
|
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);
|
|
|
|
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>
|
|
|
|
<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>
|
|
);
|
|
}
|