arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Add theme switcher component

Browse source
This commit is contained in:
Arthur Belleville 2025-04-06 20:11:02 +02:00
parent 9ab6dfe53e
commit 97a9c24ebc
No known key found for this signature in database
2 changed files with 62 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
ui/src/components/ThemeSwitcher.tsx Normal file
View file

@ -0,0 +1,60 @@
import { Switch } from "../ui-library/switch";
import { twMerge } from "tailwind-merge";
import { useTheme } from "../contexts/ThemeContext";
export function ThemeSwitcher() {
const { theme, setTheme } = useTheme();
return (
<Switch
isSelected={theme === "dark"}
onChange={() => setTheme(theme === "dark" ? "light" : "dark")}
className={twMerge(
"p-2 rounded-full",
"bg-slate-100 dark:bg-slate-800",
"border border-slate-200 dark:border-slate-700",
"hover:bg-slate-200 dark:hover:bg-slate-700",
"transition-colors"
)}
>
<div className="flex items-center gap-2">
{theme === "dark" ? (
<svg
className="w-4 h-4 text-slate-600 dark:text-slate-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
) : (
<svg
className="w-4 h-4 text-slate-600 dark:text-slate-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
)}
<span className="text-sm text-slate-600 dark:text-slate-400">
{theme === "dark"
? "Mode sombre"
: theme === "light"
? "Mode clair"
: "Mode système"}
</span>
</div>
</Switch>
);
}

56
ui/src/components/header.tsx
View file

@ -1,13 +1,10 @@
import { Button } from "../ui-library/button";
import { Switch } from "../ui-library/switch";
import { twMerge } from "tailwind-merge";
import logo from "../assets/icon.jpg";
import { Link } from "react-router-dom";
import { useTheme } from "../contexts/ThemeContext";
import { ThemeSwitcher } from "./ThemeSwitcher";
export function Header() {
const { theme, setTheme } = useTheme();
return (
<>
<header className="sticky top-0 z-50 w-full border-b border-emerald-200 dark:border-emerald-900/30 bg-emerald-100/90 dark:bg-[#0a1f0a]/90 backdrop-blur-lg">
@ -72,56 +69,7 @@ export function Header() {
S&apos;inscrire
</Button>
</Link>
<Switch
isSelected={theme === "dark"}
onChange={() => setTheme(theme === "dark" ? "light" : "dark")}
className={twMerge(
"p-2 rounded-full",
"bg-slate-100 dark:bg-slate-800",
"border border-slate-200 dark:border-slate-700",
"hover:bg-slate-200 dark:hover:bg-slate-700",
"transition-colors"
)}
>
<div className="flex items-center gap-2">
{theme === "dark" ? (
<svg
className="w-4 h-4 text-slate-600 dark:text-slate-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
) : (
<svg
className="w-4 h-4 text-slate-600 dark:text-slate-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
)}
<span className="text-sm text-slate-600 dark:text-slate-400">
{theme === "dark"
? "Mode sombre"
: theme === "light"
? "Mode clair"
: "Mode système"}
</span>
</div>
</Switch>
<ThemeSwitcher />
</div>
</div>
</nav>