try to do better

frontend/src/components/profile/UserInfo.tsx

@@ -0,0 +1,39 @@
+import { User as UserIcon, LogOut } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { User } from '../../types';
+import { Button, Card } from '../ui';
+
+interface UserInfoProps {
+  user: User | null;
+  onLogout: () => void;
+}
+
+export function UserInfo({ user, onLogout }: UserInfoProps) {
+  const { t } = useTranslation();
+
+  if (!user) return null;
+
+  return (
+    <Card>
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-4">
+          <div className="p-4 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl">
+            <UserIcon className="w-8 h-8 text-white" />
+          </div>
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+              {user.username || user.email || t('profile.anonymous')}
+            </h2>
+            <p className="text-gray-600 dark:text-gray-400">
+              {user.email || t('profile.noEmail')}
+            </p>
+          </div>
+        </div>
+        <Button variant="danger" onClick={onLogout}>
+          <LogOut className="w-5 h-5 mr-2" />
+          {t('profile.logout')}
+        </Button>
+      </div>
+    </Card>
+  );
+}