brief-20/frontend/components/admin-layout.tsx
Avnyr 753669c622 feat: add reusable frontend components for admin, dashboard, and tag management
Implemented reusable components:
- `TagSelector`: a customizable tag selection control with asynchronous mock data loading.
- `AuthLoading`: a loading state wrapper for authentication processes.
- `AdminLayout` and `DashboardLayout`: layouts with navigation and user management features.
- `ThemeProvider`: supports dynamic theme toggling.
2025-05-16 14:42:58 +02:00

140 lines
3.6 KiB
TypeScript

"use client";
import { ReactNode } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
LayoutDashboard,
Users,
Tags,
Settings,
LogOut,
Sun,
Moon,
Shield,
BarChart4
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarMenu,
SidebarMenuItem,
SidebarMenuButton,
SidebarProvider,
SidebarTrigger,
} from "@/components/ui/sidebar";
import { useTheme } from "next-themes";
interface AdminLayoutProps {
children: ReactNode;
}
export function AdminLayout({ children }: AdminLayoutProps) {
const pathname = usePathname();
const { theme, setTheme } = useTheme();
const navigation = [
{
name: "Tableau de bord",
href: "/admin",
icon: LayoutDashboard,
},
{
name: "Utilisateurs",
href: "/admin/users",
icon: Users,
},
{
name: "Tags globaux",
href: "/admin/tags",
icon: Tags,
},
{
name: "Statistiques",
href: "/admin/stats",
icon: BarChart4,
},
{
name: "Paramètres système",
href: "/admin/settings",
icon: Settings,
},
];
return (
<SidebarProvider>
<div className="flex min-h-screen">
<Sidebar>
<SidebarHeader className="flex items-center justify-between">
<Link href="/" className="flex items-center gap-2 px-2">
<Shield className="h-5 w-5 text-primary" />
<span className="text-xl font-bold">Admin</span>
</Link>
<SidebarTrigger />
</SidebarHeader>
<SidebarContent>
<SidebarMenu>
{navigation.map((item) => (
<SidebarMenuItem key={item.href}>
<SidebarMenuButton
asChild
isActive={pathname === item.href}
tooltip={item.name}
>
<Link href={item.href} className="flex items-center">
<item.icon className="mr-2 h-5 w-5" />
<span>{item.name}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarContent>
<SidebarFooter>
<div className="flex flex-col gap-2 p-2">
<Button
variant="outline"
className="w-full justify-start"
asChild
>
<Link href="/dashboard">
<Users className="mr-2 h-5 w-5" />
Mode utilisateur
</Link>
</Button>
</div>
<div className="flex items-center justify-between px-4 py-2">
<Button
variant="ghost"
size="icon"
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
aria-label="Toggle theme"
>
{theme === "dark" ? (
<Sun className="h-5 w-5" />
) : (
<Moon className="h-5 w-5" />
)}
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Logout"
asChild
>
<Link href="/auth/logout">
<LogOut className="h-5 w-5" />
</Link>
</Button>
</div>
</SidebarFooter>
</Sidebar>
<main className="flex-1 p-4 sm:p-6">{children}</main>
</div>
</SidebarProvider>
);
}