try to do better

frontend/src/components/profile/ThemeSelector.tsx

@@ -0,0 +1,43 @@
+import { Check } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { 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>
+  );
+}