42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import { Check } from 'lucide-react'
|
|
import { cn } from '../../lib/utils'
|
|
import { useTheme } from '../../context/ThemeProvider'
|
|
import { THEME_ICONS, THEME_OPTIONS } from './constants'
|
|
|
|
export function AppearanceCard() {
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
return (
|
|
<div className="divide-y divide-border rounded-xl border border-border bg-surface">
|
|
<div className="px-4 py-3">
|
|
<p className="text-sm font-medium text-primary">Apariencia</p>
|
|
<p className="text-xs text-foreground/50">Tema claro u oscuro</p>
|
|
</div>
|
|
{THEME_OPTIONS.map((option) => {
|
|
const Icon = THEME_ICONS[option.value]
|
|
const isSelected = theme === option.value
|
|
return (
|
|
<button
|
|
key={option.value}
|
|
type="button"
|
|
onClick={() => setTheme(option.value)}
|
|
className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-primary-soft"
|
|
>
|
|
<span className={cn('rounded-lg p-2', isSelected ? 'bg-accent-soft' : 'bg-primary-soft')}>
|
|
<Icon
|
|
className={cn('size-4', isSelected ? 'text-accent-fg' : 'text-foreground/70')}
|
|
/>
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className={cn('text-sm font-medium', isSelected ? 'text-accent-fg' : 'text-primary')}>
|
|
{option.label}
|
|
</p>
|
|
<p className="text-xs text-foreground/50">{option.description}</p>
|
|
</div>
|
|
{isSelected ? <Check className="size-4 text-accent-fg" /> : null}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
} |