mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2026-10-27 02:16:23 -04:00
Split the scroll shell, home link and theme toggle into small client components so the contact popover markup and icon SVGs render on the server instead of shipping in the client bundle. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
26 lines
677 B
TypeScript
26 lines
677 B
TypeScript
"use client";
|
|
|
|
import { IconMoon, IconSun } from "@tabler/icons-react";
|
|
import { useTheme } from "next-themes";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
const ThemeToggle = () => {
|
|
const { resolvedTheme, setTheme } = useTheme();
|
|
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
|
|
aria-label="Toggle theme"
|
|
className="group"
|
|
>
|
|
<IconSun className="group-hover:stroke-orange-600 dark:hidden" aria-hidden="true" />
|
|
<IconMoon className="not-dark:hidden group-hover:stroke-yellow-400" aria-hidden="true" />
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export { ThemeToggle };
|