"use client"; import { Calendar, Clock, Eye, Globe, Hash, Keyboard, Languages, Layout, Loader2, Moon, Palette, Save, Sun, Type, Volume2, } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Separator } from "@/components/ui/separator"; import { Switch } from "@/components/ui/switch"; import { cn } from "@/lib/utils"; export interface PreferencesData { theme: "light" | "dark" | "system"; accentColor?: string; fontSize: "small" | "medium" | "large"; language: string; timezone: string; dateFormat: string; timeFormat: "12h" | "24h"; numberFormat: string; density: "compact" | "comfortable" | "spacious"; animations: boolean; reducedMotion: boolean; highContrast: boolean; screenReaderAnnouncements: boolean; keyboardShortcuts: boolean; } export interface SettingsPreferencesProps { preferences?: PreferencesData; onSave?: (data: PreferencesData) => Promise; className?: string; } const accentColors = [ { value: "blue", label: "Blue", color: "bg-blue-500" }, { value: "green", label: "Green", color: "bg-green-500" }, { value: "purple", label: "Purple", color: "bg-purple-500" }, { value: "orange", label: "Orange", color: "bg-orange-500" }, { value: "red", label: "Red", color: "bg-red-500" }, { value: "pink", label: "Pink", color: "bg-pink-500" }, ]; const languages = [ { value: "en", label: "English" }, { value: "es", label: "Spanish" }, { value: "fr", label: "French" }, { value: "de", label: "German" }, { value: "ja", label: "Japanese" }, { value: "zh", label: "Chinese" }, ]; const timezones = [ { value: "UTC", label: "UTC" }, { value: "America/New_York", label: "Eastern Time (ET)" }, { value: "America/Chicago", label: "Central Time (CT)" }, { value: "America/Denver", label: "Mountain Time (MT)" }, { value: "America/Los_Angeles", label: "Pacific Time (PT)" }, { value: "Europe/London", label: "London (GMT)" }, { value: "Europe/Paris", label: "Paris (CET)" }, { value: "Asia/Tokyo", label: "Tokyo (JST)" }, ]; const dateFormats = [ { value: "MM/DD/YYYY", label: "MM/DD/YYYY" }, { value: "DD/MM/YYYY", label: "DD/MM/YYYY" }, { value: "YYYY-MM-DD", label: "YYYY-MM-DD" }, { value: "DD MMM YYYY", label: "DD MMM YYYY" }, ]; const numberFormats = [ { value: "1,234.56", label: "1,234.56 (US)" }, { value: "1.234,56", label: "1.234,56 (EU)" }, { value: "1 234,56", label: "1 234,56 (FR)" }, ]; const defaultPreferences: PreferencesData = { theme: "system", accentColor: "blue", fontSize: "medium", language: "en", timezone: "UTC", dateFormat: "MM/DD/YYYY", timeFormat: "12h", numberFormat: "1,234.56", density: "comfortable", animations: true, reducedMotion: false, highContrast: false, screenReaderAnnouncements: true, keyboardShortcuts: true, }; export default function SettingsPreferences({ preferences = defaultPreferences, onSave, className, }: SettingsPreferencesProps) { const [isSaving, setIsSaving] = useState(false); const [localPreferences, setLocalPreferences] = useState(preferences); const handleSave = async () => { setIsSaving(true); try { await onSave?.(localPreferences); } finally { setIsSaving(false); } }; const updatePreference = ( key: K, value: PreferencesData[K] ) => { setLocalPreferences((prev) => ({ ...prev, [key]: value })); }; return (

Preferences Customize your app experience and appearance

{/* Appearance Section */}

Appearance

{/* Theme Selection */}

Theme

{[ { value: "light", label: "Light", icon: Sun }, { value: "dark", label: "Dark", icon: Moon }, { value: "system", label: "System", icon: Layout }, ].map((theme) => { const Icon = theme.icon; return ( ); })}

{/* Accent Color */}

Accent Color

{accentColors.map((color) => ( ))}

{/* Font Size */}

Font Size

{/* Density */}

Display Density

{/* Language & Region Section */}

Language & Region

{/* Language */}

Language

{/* Timezone */}

Timezone

{/* Date Format */}

Date Format

{/* Time Format */}

Time Format

{/* Number Format */}

Number Format

{/* Accessibility Section */}

Accessibility

Animations Smooth transitions

updatePreference("animations", checked) } />

Reduced Motion Respect system preference

updatePreference("reducedMotion", checked) } />

High Contrast Better visibility

updatePreference("highContrast", checked) } />

Screen Reader Enable announcements

Keyboard Shortcuts Faster navigation

updatePreference("keyboardShortcuts", checked) } />

); }

Appearance

Language & Region

Accessibility

Example Usage