32 lines
992 B
TypeScript
32 lines
992 B
TypeScript
import { useSettings } from '@/state/useSettings';
|
|
import { themes } from 'themes';
|
|
|
|
export const Appearance = () => {
|
|
const { settings, saveSettings } = useSettings();
|
|
|
|
const handleColorThemeChange = (colorTheme: string) => {
|
|
saveSettings({ ...settings, appearance: { ...settings.appearance, colorTheme } });
|
|
};
|
|
|
|
const activeColorTheme = settings.appearance.colorTheme ?? 'DuckPond';
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2 pt-2">
|
|
{themes.map((t) => (
|
|
<button
|
|
key={t.id}
|
|
type="button"
|
|
onClick={() => handleColorThemeChange(t.id)}
|
|
className={`rounded-md px-3 py-2.5 text-sm font-medium cursor-pointer transition-colors ${
|
|
activeColorTheme === t.id
|
|
? 'bg-duck-teal text-white ring-2 ring-duck-teal/50'
|
|
: 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
|
|
}`}
|
|
>
|
|
{t.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|