61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
"use client"
|
|
import { Monitor, Moon, Sun } from "lucide-react"
|
|
import { useTheme } from "next-themes"
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
|
import { Label } from "@/shared/components/ui/label"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/shared/components/ui/select"
|
|
|
|
type ThemeChoice = "system" | "light" | "dark"
|
|
|
|
export function ThemePreferencesCard() {
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
const value: ThemeChoice = theme === "light" || theme === "dark" || theme === "system" ? theme : "system"
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Theme</CardTitle>
|
|
<CardDescription>Choose how the admin console looks on this device.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-3 sm:max-w-md">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="theme">Color theme</Label>
|
|
<Select value={value} onValueChange={(v) => setTheme(v)}>
|
|
<SelectTrigger id="theme" suppressHydrationWarning>
|
|
<SelectValue placeholder="Select theme" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="system">
|
|
<div className="flex items-center gap-2">
|
|
<Monitor className="h-4 w-4 text-muted-foreground" />
|
|
System
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="light">
|
|
<div className="flex items-center gap-2">
|
|
<Sun className="h-4 w-4 text-muted-foreground" />
|
|
Light
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="dark">
|
|
<div className="flex items-center gap-2">
|
|
<Moon className="h-4 w-4 text-muted-foreground" />
|
|
Dark
|
|
</div>
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|