feat: first approach from tanel

components/design-system/settings-card.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Bell, Shield, Eye, Database } from "lucide-react"
+
+export function SettingsCard() {
+  const [notifications, setNotifications] = useState(true)
+  const [auditLogs, setAuditLogs] = useState(true)
+  const [dataRetention, setDataRetention] = useState(false)
+
+  return (
+    <Card className="max-w-xl">
+      <CardHeader>
+        <CardTitle className="font-serif text-xl">System Configuration</CardTitle>
+        <CardDescription className="font-sans">
+          Configure your contained AI deployment. All settings remain within your environment.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Notifications */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Bell className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <Label htmlFor="notifications" className="font-sans text-sm font-medium">
+                System Notifications
+              </Label>
+              <p className="font-sans text-xs text-muted-foreground">
+                Receive alerts for system events and anomalies
+              </p>
+            </div>
+          </div>
+          <Switch 
+            id="notifications" 
+            checked={notifications}
+            onCheckedChange={setNotifications}
+          />
+        </div>
+
+        <Separator />
+
+        {/* Audit Logs */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Eye className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <Label htmlFor="audit-logs" className="font-sans text-sm font-medium">
+                Audit Logging
+              </Label>
+              <p className="font-sans text-xs text-muted-foreground">
+                Record all system actions for compliance
+              </p>
+            </div>
+          </div>
+          <Switch 
+            id="audit-logs" 
+            checked={auditLogs}
+            onCheckedChange={setAuditLogs}
+          />
+        </div>
+
+        <Separator />
+
+        {/* Data Retention */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Database className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <Label htmlFor="data-retention" className="font-sans text-sm font-medium">
+                Extended Retention
+              </Label>
+              <p className="font-sans text-xs text-muted-foreground">
+                Keep processed data beyond 30 days
+              </p>
+            </div>
+          </div>
+          <Switch 
+            id="data-retention" 
+            checked={dataRetention}
+            onCheckedChange={setDataRetention}
+          />
+        </div>
+
+        <Separator />
+
+        {/* Security Level */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Shield className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <Label htmlFor="security-level" className="font-sans text-sm font-medium">
+                Security Profile
+              </Label>
+              <p className="font-sans text-xs text-muted-foreground">
+                Isolation and access control level
+              </p>
+            </div>
+          </div>
+          <Select defaultValue="strict">
+            <SelectTrigger id="security-level" className="w-32">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="standard">Standard</SelectItem>
+              <SelectItem value="strict">Strict</SelectItem>
+              <SelectItem value="airgapped">Air-gapped</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <Separator />
+
+        {/* Actions */}
+        <div className="flex gap-3 pt-2">
+          <Button>Save Changes</Button>
+          <Button variant="outline">Reset to Defaults</Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}