44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { Check } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import type { Theme } from '../../types';
|
|
import { THEMES } from '../../constants';
|
|
|
|
interface ThemeSelectorProps {
|
|
currentTheme: Theme;
|
|
onThemeChange: (theme: Theme) => void;
|
|
}
|
|
|
|
export function ThemeSelector({ currentTheme, onThemeChange }: ThemeSelectorProps) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
|
|
{t('profile.theme')}
|
|
</label>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
|
{THEMES.map((theme) => (
|
|
<button
|
|
key={theme.id}
|
|
onClick={() => onThemeChange(theme.id)}
|
|
className={`relative p-4 rounded-xl ${theme.gradient} transition-all duration-300 ${
|
|
currentTheme === theme.id
|
|
? 'ring-4 ring-blue-500 scale-105'
|
|
: 'hover:scale-105'
|
|
}`}
|
|
>
|
|
{currentTheme === theme.id && (
|
|
<div className="absolute top-2 right-2 bg-white rounded-full p-1">
|
|
<Check className="w-4 h-4 text-blue-600" />
|
|
</div>
|
|
)}
|
|
<p className="text-sm font-medium text-center text-white drop-shadow-lg">
|
|
{theme.name}
|
|
</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|