49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { useTheme } from "next-themes"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Label } from "@/components/ui/label"
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
|
import { cn } from "@/lib/utils"
|
|
import { Sun, Moon, Monitor } from "lucide-react"
|
|
|
|
export function ThemeSettings() {
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
const options = [
|
|
{ value: "light", icon: Sun, label: "Light" },
|
|
{ value: "dark", icon: Moon, label: "Dark" },
|
|
{ value: "system", icon: Monitor, label: "System" },
|
|
]
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Theme Settings</CardTitle>
|
|
<CardDescription>
|
|
Choose your preferred appearance for the dashboard.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<RadioGroup value={theme} onValueChange={setTheme} className="grid grid-cols-3 gap-4">
|
|
{options.map(({ value, icon: Icon, label }) => (
|
|
<div key={value}>
|
|
<RadioGroupItem value={value} id={value} className="peer sr-only" />
|
|
<Label
|
|
htmlFor={value}
|
|
className={cn(
|
|
"flex flex-col items-center gap-3 rounded-lg border-2 p-4 hover:bg-accent cursor-pointer transition-all",
|
|
"peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5"
|
|
)}
|
|
>
|
|
<Icon className="h-6 w-6" />
|
|
<span className="text-sm font-medium">{label}</span>
|
|
</Label>
|
|
</div>
|
|
))}
|
|
</RadioGroup>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|