Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 8x 8x 8x 370x 370x 370x 18x 1x 352x 4x | import { Sun, Moon, Monitor } from "lucide-react";
import { useTheme, type Theme } from "../../lib/theme-context";
const themeIcons: Record<Theme, typeof Sun> = {
light: Sun,
dark: Moon,
system: Monitor,
};
const themeCycle: Record<Theme, Theme> = {
light: "dark",
dark: "system",
system: "light",
};
const themeLabels: Record<Theme, string> = {
light: "Light Mode",
dark: "Dark Mode",
system: "System",
};
interface ThemeSwitcherProps {
variant?: "icon" | "card";
size?: "sm" | "md";
className?: string;
}
export function ThemeSwitcher({ variant = "icon", size = "md", className }: ThemeSwitcherProps) {
const { theme, setTheme } = useTheme();
const ThemeIcon = themeIcons[theme];
if (variant === "card") {
return (
<button
type="button"
onClick={() => setTheme(themeCycle[theme])}
className={`flex flex-col items-center justify-center rounded-lg border border-border-default p-4 hover:bg-background-muted hover:shadow-card-hover transition-all duration-200 ${className || ""}`}
>
<ThemeIcon className="h-8 w-8 text-amber-500 mb-2" />
<span className="text-sm font-medium">{themeLabels[theme]}</span>
</button>
);
}
return (
<button
type="button"
onClick={() => setTheme(themeCycle[theme])}
className={`rounded-md hover:text-foreground-default transition-colors ${
size === "sm"
? "p-1 text-foreground-subtle"
: "p-2 text-foreground-muted hover:bg-background-muted"
} ${className || ""}`}
title={themeLabels[theme]}
>
<ThemeIcon className={size === "sm" ? "h-4 w-4" : "h-5 w-5"} />
</button>
);
}
|