72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { Moon, Sun, Monitor } from "lucide-react";
|
|
import { useTheme } from "next-themes";
|
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
|
|
export function ModeToggle() {
|
|
const { theme, setTheme } = useTheme();
|
|
const [selectedTheme, setSelectedTheme] = React.useState<string>("system");
|
|
|
|
// Pastikan toggle tetap di posisi yang benar setelah reload
|
|
React.useEffect(() => {
|
|
if (theme) {
|
|
setSelectedTheme(theme);
|
|
} else {
|
|
setSelectedTheme("system"); // Default ke system jika undefined
|
|
}
|
|
}, [theme]);
|
|
|
|
return (
|
|
<ToggleGroup
|
|
type="single"
|
|
value={selectedTheme}
|
|
onValueChange={(value) => {
|
|
if (value) {
|
|
setTheme(value);
|
|
setSelectedTheme(value);
|
|
}
|
|
}}
|
|
className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-1 transition-all"
|
|
>
|
|
<ToggleGroupItem
|
|
value="light"
|
|
size="sm"
|
|
aria-label="Light Mode"
|
|
className={`rounded-full p-1 transition-all ${
|
|
selectedTheme === "light"
|
|
? "bg-primary text-primary-foreground"
|
|
: "bg-transparent hover:bg-muted/50"
|
|
}`}
|
|
>
|
|
<Sun className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem
|
|
value="system"
|
|
size="sm"
|
|
aria-label="System Mode"
|
|
className={`rounded-full p-1 transition-all ${
|
|
selectedTheme === "system"
|
|
? "bg-primary text-primary-foreground"
|
|
: "bg-transparent hover:bg-muted/50"
|
|
}`}
|
|
>
|
|
<Monitor className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem
|
|
value="dark"
|
|
size="sm"
|
|
aria-label="Dark Mode"
|
|
className={`rounded-full p-1 transition-all ${
|
|
selectedTheme === "dark"
|
|
? "bg-primary text-primary-foreground"
|
|
: "bg-transparent hover:bg-muted/50"
|
|
}`}
|
|
>
|
|
<Moon className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
);
|
|
}
|