45 lines
1.6 KiB
JavaScript
45 lines
1.6 KiB
JavaScript
import { Palette } from 'lucide-react';
|
|
import { themes, getTheme } from '../themes';
|
|
|
|
export default function ThemeSelector({ currentTheme, onThemeChange }) {
|
|
const theme = getTheme(currentTheme);
|
|
|
|
const themeColors = {
|
|
modern: 'bg-gradient-to-r from-green-600 to-emerald-600',
|
|
dark: 'bg-gray-800',
|
|
light: 'bg-gray-100',
|
|
purple: 'bg-purple-600',
|
|
blue: 'bg-blue-600',
|
|
green: 'bg-green-600',
|
|
};
|
|
|
|
return (
|
|
<div className="relative group">
|
|
<button className={`p-2 rounded-lg ${theme.hover} transition`}>
|
|
<Palette className="w-5 h-5" />
|
|
</button>
|
|
|
|
<div className={`absolute right-0 mt-2 w-48 ${theme.secondary} rounded-lg shadow-xl ${theme.border} border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50`}>
|
|
<div className="p-2">
|
|
<div className={`text-xs ${theme.textSecondary} px-2 py-1 mb-1`}>Выберите тему</div>
|
|
{Object.entries(themes).map(([key, themeItem]) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => onThemeChange(key)}
|
|
className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg ${theme.hover} transition ${
|
|
currentTheme === key ? theme.tertiary : ''
|
|
}`}
|
|
>
|
|
<div className={`w-4 h-4 rounded ${themeColors[key]}`} />
|
|
<span className="text-sm">{themeItem.name}</span>
|
|
{currentTheme === key && (
|
|
<span className="ml-auto text-xs text-green-500">✓</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|