kaneo (minimalist kanban) fork to experiment adding a tangled integration
github.com/usekaneo/kaneo
1import { MoonIcon, SunIcon } from "lucide-react";
2import { useId } from "react";
3import { Label } from "@/components/ui/label";
4import { Switch } from "@/components/ui/switch";
5import { useUserPreferencesStore } from "@/store/user-preferences";
6
7export function ThemeToggleDropdown() {
8 const { theme, setTheme } = useUserPreferencesStore();
9 const id = useId();
10 const checked = theme === "light";
11
12 const handleThemeChange = (nextChecked: boolean) => {
13 setTheme(nextChecked ? "light" : "dark");
14 };
15
16 return (
17 <div>
18 <div className="relative inline-grid h-7 grid-cols-[1fr_1fr] items-center font-medium text-sm">
19 <Switch
20 checked={checked}
21 className="peer absolute inset-0 h-[inherit] w-auto rounded-full bg-input/50 data-checked:bg-input/50 data-unchecked:bg-input/50 [&_[data-slot=switch-thumb]]:h-full [&_[data-slot=switch-thumb]]:w-1/2 [&_[data-slot=switch-thumb]]:rounded-full [&_[data-slot=switch-thumb]]:transition-transform [&_[data-slot=switch-thumb]]:duration-300 [&_[data-slot=switch-thumb]]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_[data-slot=switch-thumb]]:data-checked:translate-x-full [&_[data-slot=switch-thumb]]:rtl:data-checked:-translate-x-full"
22 id={id}
23 onCheckedChange={handleThemeChange}
24 />
25 <span className="pointer-events-none relative ms-0.5 flex min-w-7 items-center justify-center text-center peer-data-[state=checked]:text-muted-foreground/70">
26 <MoonIcon aria-hidden="true" size={13} />
27 </span>
28 <span className="pointer-events-none relative me-0.5 flex min-w-7 items-center justify-center text-center peer-data-[state=unchecked]:text-muted-foreground/70">
29 <SunIcon aria-hidden="true" size={13} />
30 </span>
31 </div>
32 <Label className="sr-only" htmlFor={id}>
33 Toggle theme
34 </Label>
35 </div>
36 );
37}