try to do better

frontend/src/components/profile/MembersSection.tsx

@@ -0,0 +1,88 @@
+import { useTranslation } from 'react-i18next';
+import { Loader2 } from 'lucide-react';
+import { FamilyMember, User } from '../../types';
+import { Badge, LoadingSpinner } from '../ui';
+
+interface MembersSectionProps {
+  members: FamilyMember[];
+  currentUser: User | null;
+  loading: boolean;
+}
+
+export function MembersSection({ members, currentUser, loading }: MembersSectionProps) {
+  const { t } = useTranslation();
+
+  if (loading) {
+    return (
+      <div className="mb-4">
+        <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-3">
+          {t('profile.members')}
+        </h3>
+        <div className="flex items-center justify-center py-4">
+          <LoadingSpinner size="sm" />
+        </div>
+      </div>
+    );
+  }
+
+  if (members.length === 0) {
+    return (
+      <div className="mb-4">
+        <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-3">
+          {t('profile.members')}
+        </h3>
+        <div className="text-center py-4 text-gray-500 dark:text-gray-400 text-sm">
+          {t('profile.noMembers')}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mb-4">
+      <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-3">
+        {t('profile.members')} ({members.length})
+      </h3>
+      <div className="space-y-2">
+        {members.map((member) => (
+          <div
+            key={member.id}
+            className={`flex items-center justify-between p-3 rounded-xl ${
+              member.id === currentUser?.id
+                ? 'bg-purple-50 dark:bg-purple-900/20 border-2 border-purple-200 dark:border-purple-800'
+                : 'bg-gray-50 dark:bg-gray-800'
+            }`}
+          >
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-sm font-bold">
+                {(member.username || member.email || '?')[0].toUpperCase()}
+              </div>
+              <div>
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-gray-800 dark:text-white">
+                    {member.username || member.email || t('profile.unknownUser')}
+                  </span>
+                  {member.id === currentUser?.id && (
+                    <Badge variant="info" size="sm">
+                      {t('profile.you')}
+                    </Badge>
+                  )}
+                </div>
+                {member.email && member.username && (
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
+                    {member.email}
+                  </span>
+                )}
+              </div>
+            </div>
+            {member.is_admin && (
+              <Badge variant="warning" size="sm">
+                Admin
+              </Badge>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}