Initial commit

frontend/src/components/ThemeSelector.jsx

@@ -0,0 +1,43 @@
+import { Palette } from 'lucide-react';
+import { themes, getTheme } from '../themes';
+
+export default function ThemeSelector({ currentTheme, onThemeChange }) {
+  const theme = getTheme(currentTheme);
+  
+  const themeColors = {
+    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>
+  );
+}