BreizhHardware/Site-comptage-heure
1
0
Fork 0
mirror of https://github.com/BreizhHardware/Site-comptage-heure.git synced 2026-01-18 16:17:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #24 from BreizhHardware/feat/auto-theme

Browse Source 
feat: Add theme selector to header
This commit is contained in:
Félix MARQUET
2025-11-20 18:09:34 +01:00
committed by GitHub
parent 69292a0490 73ddaf38fb
commit 0bd720da09
2 changed files with 78 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/Header.tsx
View File

@@ -3,6 +3,7 @@
import { useSession, signOut } from 'next-auth/react';
import { Button } from './ui/button';
import { useSettings } from '../context/SettingsContext';
import { ModeToggle } from './mode-toggle';
export default function Header() {
const { data: session } = useSession();
@@ -19,24 +20,27 @@ export default function Header() {
{settings.name || 'Club Scolaire'}
</h1>
</div>
{session && (
<div className="flex items-center space-x-4">
<span className="text-gray-900 dark:text-white">
{session.user.email} (
{session.user.role === 'MEMBER'
? 'Membre'
: session.user.role === 'ADMIN'
? 'Bureau'
: session.user.role === 'SUPER_ADMIN'
? 'Gestionnaire'
: session.user.role}
)
</span>
<Button onClick={() => signOut()} variant="destructive">
Déconnexion
</Button>
</div>
)}
<div className="flex items-center space-x-4">
<ModeToggle />
{session && (
<>
<span className="text-gray-900 dark:text-white">
{session.user.email} (
{session.user.role === 'MEMBER'
? 'Membre'
: session.user.role === 'ADMIN'
? 'Bureau'
: session.user.role === 'SUPER_ADMIN'
? 'Gestionnaire'
: session.user.role}
)
</span>
<Button onClick={() => signOut()} variant="destructive">
Déconnexion
</Button>
</>
)}
</div>
</div>
</header>
);

56
components/mode-toggle.tsx Normal file
View File

@@ -0,0 +1,56 @@
"use client"
import * as React from "react"
import { Moon, Sun, Laptop } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
export function ModeToggle() {
const { setTheme, theme } = useTheme()
return (
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" size="icon">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Changer le thème</span>
</Button>
</PopoverTrigger>
<PopoverContent align="end" className="w-40 p-2">
<div className="grid gap-1">
<Button
variant={theme === "light" ? "secondary" : "ghost"}
className="w-full justify-start gap-2"
onClick={() => setTheme("light")}
>
<Sun className="h-4 w-4" />
<span>Clair</span>
</Button>
<Button
variant={theme === "dark" ? "secondary" : "ghost"}
className="w-full justify-start gap-2"
onClick={() => setTheme("dark")}
>
<Moon className="h-4 w-4" />
<span>Sombre</span>
</Button>
<Button
variant={theme === "system" ? "secondary" : "ghost"}
className="w-full justify-start gap-2"
onClick={() => setTheme("system")}
>
<Laptop className="h-4 w-4" />
<span>Système</span>
</Button>
</div>
</PopoverContent>
</Popover>
)
}