dwindown/woonoow-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: docubook@latest template nextjs-docker

Browse Source
This commit is contained in:
gitfromwildan
2026-05-30 18:52:21 +07:00
parent bf2ef37f49
commit 80eb49d968
101 changed files with 1759 additions and 4165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/ThemeToggle.tsx
View File

@@ -7,35 +7,27 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
export function ModeToggle() {
const { theme, setTheme, resolvedTheme } = useTheme();
const [mounted, setMounted] = React.useState(false);
const mounted = React.useSyncExternalStore(
() => () => {},
() => true,
() => false
);
// Untuk menghindari hydration mismatch
React.useEffect(() => {
setMounted(true);
}, []);
// Jika belum mounted, jangan render apapun untuk menghindari mismatch
// If not mounted, do not render anything to avoid mismatch
if (!mounted) {
return (
<div className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-0.5">
<div className="rounded-full p-0 w-1 h-1" />
<div className="rounded-full p-0 w-1 h-1" />
<div className="border-border bg-background/50 flex items-center gap-1 rounded-full border p-0.5">
<div className="h-1 w-1 rounded-full p-0" />
<div className="h-1 w-1 rounded-full p-0" />
</div>
);
}
// Tentukan theme yang aktif: gunakan resolvedTheme untuk menampilkan ikon yang sesuai
// jika theme === "system", resolvedTheme akan menjadi "light" atau "dark" sesuai device
const activeTheme = theme === "system" || !theme ? resolvedTheme : theme;
const handleToggle = () => {
// Toggle antara light dan dark
// Jika sekarang light, ganti ke dark, dan sebaliknya
if (activeTheme === "light") {
setTheme("dark");
} else {
setTheme("light");
}
const handleToggle = (value: string) => {
if (!value) return;
setTheme(value);
};
return (
@@ -43,29 +35,31 @@ export function ModeToggle() {
type="single"
value={activeTheme}
onValueChange={handleToggle}
className="flex items-center gap-1 rounded-full border border-border bg-background/50 p-0.5 transition-all"
className="border-border bg-background/50 flex items-center gap-1 rounded-full border p-0.5 transition-all"
>
<ToggleGroupItem
value="light"
size="xs"
aria-label="Light Mode"
className={`rounded-full cursor-pointer p-0.5 transition-all ${activeTheme === "light"
? "bg-primary text-primary-foreground"
: "bg-transparent hover:bg-muted/50"
}`}
className={`cursor-pointer rounded-full p-0.5 transition-all ${
activeTheme === "light"
? "bg-primary text-primary-foreground"
: "hover:bg-muted/50 bg-transparent"
}`}
>
<Sun className="h-0.5 w-0.5" />
<Sun className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem
value="dark"
size="xs"
aria-label="Dark Mode"
className={`rounded-full cursor-pointer p-0.5 transition-all ${activeTheme === "dark"
? "bg-primary text-primary-foreground"
: "bg-transparent hover:bg-muted/50"
}`}
className={`cursor-pointer rounded-full p-0.5 transition-all ${
activeTheme === "dark"
? "bg-primary text-primary-foreground"
: "hover:bg-muted/50 bg-transparent"
}`}
>
<Moon className="h-0.5 w-0.5" />
<Moon className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
);