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.
This commit is contained in:
parent
cf292de428
commit
753669c622
140
frontend/components/admin-layout.tsx
Normal file
140
frontend/components/admin-layout.tsx
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
"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>
|
||||||
|
);
|
||||||
|
}
|
||||||
24
frontend/components/auth-loading.tsx
Normal file
24
frontend/components/auth-loading.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useAuth } from "@/lib/auth-context";
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
|
||||||
|
interface AuthLoadingProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AuthLoading({ children }: AuthLoadingProps) {
|
||||||
|
const { isLoading } = useAuth();
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-screen flex-col items-center justify-center p-4 text-center">
|
||||||
|
<Loader2 className="mb-4 h-8 w-8 animate-spin text-primary" />
|
||||||
|
<h1 className="mb-2 text-xl font-semibold">Chargement...</h1>
|
||||||
|
<p className="text-muted-foreground">Veuillez patienter pendant que nous vérifions votre authentification.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
168
frontend/components/dashboard-layout.tsx
Normal file
168
frontend/components/dashboard-layout.tsx
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ReactNode } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
import {
|
||||||
|
LayoutDashboard,
|
||||||
|
Users,
|
||||||
|
FolderKanban,
|
||||||
|
Tags,
|
||||||
|
Settings,
|
||||||
|
LogOut,
|
||||||
|
Sun,
|
||||||
|
Moon,
|
||||||
|
Shield,
|
||||||
|
User
|
||||||
|
} from "lucide-react";
|
||||||
|
import { useAuth } from "@/lib/auth-context";
|
||||||
|
|
||||||
|
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 DashboardLayoutProps {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DashboardLayout({ children }: DashboardLayoutProps) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const { theme, setTheme } = useTheme();
|
||||||
|
const { user, logout } = useAuth();
|
||||||
|
|
||||||
|
const navigation = [
|
||||||
|
{
|
||||||
|
name: "Tableau de bord",
|
||||||
|
href: "/dashboard",
|
||||||
|
icon: LayoutDashboard,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Projets",
|
||||||
|
href: "/projects",
|
||||||
|
icon: FolderKanban,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Personnes",
|
||||||
|
href: "/persons",
|
||||||
|
icon: Users,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Tags",
|
||||||
|
href: "/tags",
|
||||||
|
icon: Tags,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Paramètres",
|
||||||
|
href: "/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">
|
||||||
|
<span className="text-xl font-bold">Groupes</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>
|
||||||
|
{/* User info */}
|
||||||
|
{user && (
|
||||||
|
<div className="flex items-center gap-3 p-4 border-b">
|
||||||
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground shrink-0">
|
||||||
|
{user.avatar ? (
|
||||||
|
<img
|
||||||
|
src={user.avatar}
|
||||||
|
alt={user.name}
|
||||||
|
className="h-8 w-8 rounded-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<User className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-0.5 min-w-0">
|
||||||
|
<span className="text-sm font-medium truncate">{user.name}</span>
|
||||||
|
<span className="text-xs text-muted-foreground">{user.role}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Admin button */}
|
||||||
|
{user && user.role === 'ADMIN' && (
|
||||||
|
<div className="flex flex-col p-3">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="w-full justify-start"
|
||||||
|
asChild
|
||||||
|
>
|
||||||
|
<Link href="/admin" className="flex items-center">
|
||||||
|
<Shield className="mr-2 h-5 w-5" />
|
||||||
|
<span className="truncate">Mode administrateur</span>
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Theme and logout buttons */}
|
||||||
|
<div className="flex items-center justify-between gap-2 px-4 py-3 mt-auto">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
|
||||||
|
aria-label="Toggle theme"
|
||||||
|
className="flex items-center justify-center"
|
||||||
|
>
|
||||||
|
{theme === "dark" ? (
|
||||||
|
<Sun className="h-5 w-5" />
|
||||||
|
) : (
|
||||||
|
<Moon className="h-5 w-5" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
aria-label="Logout"
|
||||||
|
onClick={() => logout()}
|
||||||
|
className="flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<LogOut className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</SidebarFooter>
|
||||||
|
</Sidebar>
|
||||||
|
<main className="flex-1 p-4 sm:p-6">{children}</main>
|
||||||
|
</div>
|
||||||
|
</SidebarProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
218
frontend/components/tag-selector.tsx
Normal file
218
frontend/components/tag-selector.tsx
Normal file
@ -0,0 +1,218 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||||
|
import { Check, ChevronsUpDown, X } from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
// Map color names to Tailwind classes
|
||||||
|
const colorMap: Record<string, string> = {
|
||||||
|
blue: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
|
||||||
|
green: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
|
||||||
|
purple: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
|
||||||
|
pink: "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300",
|
||||||
|
orange: "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300",
|
||||||
|
yellow: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
|
||||||
|
amber: "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300",
|
||||||
|
red: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface Tag {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
color: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TagSelectorProps {
|
||||||
|
selectedTags: Tag[];
|
||||||
|
onChange: (tags: Tag[]) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TagSelector({
|
||||||
|
selectedTags = [],
|
||||||
|
onChange,
|
||||||
|
placeholder = "Sélectionner des tags...",
|
||||||
|
disabled = false,
|
||||||
|
className,
|
||||||
|
}: TagSelectorProps) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [tags, setTags] = useState<Tag[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
// Mock data for tags - in a real app, this would be fetched from an API
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchTags = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
// Simulate API call
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 500));
|
||||||
|
|
||||||
|
// Mock data
|
||||||
|
const mockTags = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "Frontend",
|
||||||
|
description: "Développement frontend",
|
||||||
|
color: "blue",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "Backend",
|
||||||
|
description: "Développement backend",
|
||||||
|
color: "green",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "Fullstack",
|
||||||
|
description: "Développement fullstack",
|
||||||
|
color: "purple",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "UX/UI",
|
||||||
|
description: "Design UX/UI",
|
||||||
|
color: "pink",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "DevOps",
|
||||||
|
description: "Infrastructure et déploiement",
|
||||||
|
color: "orange",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: "Junior",
|
||||||
|
description: "Niveau junior",
|
||||||
|
color: "yellow",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: "Medior",
|
||||||
|
description: "Niveau intermédiaire",
|
||||||
|
color: "amber",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
name: "Senior",
|
||||||
|
description: "Niveau senior",
|
||||||
|
color: "red",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
setTags(mockTags);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching tags:", error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchTags();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSelect = (tag: Tag) => {
|
||||||
|
const isSelected = selectedTags.some(t => t.id === tag.id);
|
||||||
|
|
||||||
|
if (isSelected) {
|
||||||
|
onChange(selectedTags.filter(t => t.id !== tag.id));
|
||||||
|
} else {
|
||||||
|
onChange([...selectedTags, tag]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemove = (tagId: number) => {
|
||||||
|
onChange(selectedTags.filter(tag => tag.id !== tagId));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn("space-y-2", className)}>
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
role="combobox"
|
||||||
|
aria-expanded={open}
|
||||||
|
className="w-full justify-between"
|
||||||
|
disabled={disabled || loading}
|
||||||
|
>
|
||||||
|
{selectedTags.length > 0
|
||||||
|
? `${selectedTags.length} tag${selectedTags.length > 1 ? "s" : ""} sélectionné${selectedTags.length > 1 ? "s" : ""}`
|
||||||
|
: placeholder}
|
||||||
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-full p-0">
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="Rechercher un tag..." />
|
||||||
|
<CommandEmpty>Aucun tag trouvé.</CommandEmpty>
|
||||||
|
<CommandGroup className="max-h-64 overflow-auto">
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex items-center justify-center p-4">
|
||||||
|
<span className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
tags.map(tag => (
|
||||||
|
<CommandItem
|
||||||
|
key={tag.id}
|
||||||
|
value={tag.name}
|
||||||
|
onSelect={() => handleSelect(tag)}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
"mr-2 h-4 w-4",
|
||||||
|
selectedTags.some(t => t.id === tag.id)
|
||||||
|
? "opacity-100"
|
||||||
|
: "opacity-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge className={colorMap[tag.color]}>
|
||||||
|
{tag.name}
|
||||||
|
</Badge>
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{tag.description}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</CommandItem>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</CommandGroup>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
{selectedTags.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-2 mt-2">
|
||||||
|
{selectedTags.map(tag => (
|
||||||
|
<Badge
|
||||||
|
key={tag.id}
|
||||||
|
className={cn(
|
||||||
|
colorMap[tag.color],
|
||||||
|
"flex items-center gap-1 pr-1"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{tag.name}
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-4 w-4 rounded-full p-0 hover:bg-background/20"
|
||||||
|
onClick={() => handleRemove(tag.id)}
|
||||||
|
disabled={disabled}
|
||||||
|
>
|
||||||
|
<X className="h-3 w-3" />
|
||||||
|
<span className="sr-only">Supprimer</span>
|
||||||
|
</Button>
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
9
frontend/components/theme-provider.tsx
Normal file
9
frontend/components/theme-provider.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
||||||
|
import { type ThemeProviderProps } from "next-themes";
|
||||||
|
|
||||||
|
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||||
|
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user