83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import { cn, useTheme } from "@usesend/ui";
|
|
import { Button } from "@usesend/ui/src/button";
|
|
import { Monitor, Sun, Moon, SunMoonIcon } from "lucide-react";
|
|
|
|
export const ThemeSwitcher = () => {
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
return (
|
|
<div className="flex gap-2 items-center justify-between">
|
|
<p className="text-sm text-popover-foreground flex items-center gap-2">
|
|
<SunMoonIcon className="h-4 w-4" />
|
|
Theme
|
|
</p>
|
|
<div className="flex gap-2 border rounded-md p-1 ">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className={cn(
|
|
"p-0.5 rounded-[0.20rem] h-5 w-5",
|
|
theme === "system" ? " bg-muted" : "",
|
|
)}
|
|
onClick={() => setTheme("system")}
|
|
>
|
|
<Monitor className="h-3 w-3" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className={cn(
|
|
"p-0.5 rounded-[0.20rem] h-5 w-5",
|
|
theme === "light" ? " bg-muted" : "",
|
|
)}
|
|
onClick={() => setTheme("light")}
|
|
>
|
|
<Sun className="h-3 w-3" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className={cn(
|
|
"p-0.5 rounded-[0.20rem] h-5 w-5",
|
|
theme === "dark" ? "bg-muted" : "",
|
|
)}
|
|
onClick={() => setTheme("dark")}
|
|
>
|
|
<Moon className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const MiniThemeSwitcher = () => {
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
const cycleTheme = () => {
|
|
if (theme === "light") {
|
|
setTheme("dark");
|
|
} else if (theme === "dark") {
|
|
setTheme("system");
|
|
} else {
|
|
setTheme("light");
|
|
}
|
|
};
|
|
|
|
const renderIcon = () => {
|
|
switch (theme) {
|
|
case "light":
|
|
return <Sun className="h-4 w-4" />;
|
|
case "dark":
|
|
return <Moon className="h-4 w-4" />;
|
|
default:
|
|
return <Monitor className="h-4 w-4" />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Button variant="ghost" size="icon" onClick={cycleTheme}>
|
|
{renderIcon()}
|
|
</Button>
|
|
);
|
|
};
|