Initial commit

2026-06-17 13:51:22 +02:00
commit 4898bf7142
81 changed files with 12522 additions and 0 deletions
@@ -0,0 +1,48 @@
+"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>
+  )
+}