website refactor

apps/website/components/profile/MembershipPanel.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
+import { Text } from '@/ui/Text';
+import { LeagueListItem } from '@/ui/LeagueListItem';
+import { ProfileSection } from './ProfileSection';
+
+interface League {
+  leagueId: string;
+  name: string;
+  description: string;
+  logoUrl?: string;
+  memberCount: number;
+  roleLabel: string;
+}
+
+interface MembershipPanelProps {
+  ownedLeagues: League[];
+  memberLeagues: League[];
+}
+
+export function MembershipPanel({ ownedLeagues, memberLeagues }: MembershipPanelProps) {
+  return (
+    <Stack gap={8}>
+      <ProfileSection 
+        title="Leagues You Own" 
+        description="Manage the leagues you have created and lead."
+      >
+        {ownedLeagues.length === 0 ? (
+          <Card>
+            <Text size="sm" color="text-gray-400">
+              You don&apos;t own any leagues yet.
+            </Text>
+          </Card>
+        ) : (
+          <Stack gap={3}>
+            {ownedLeagues.map((league) => (
+              <LeagueListItem key={league.leagueId} league={league} isAdmin />
+            ))}
+          </Stack>
+        )}
+      </ProfileSection>
+
+      <ProfileSection 
+        title="Leagues You're In" 
+        description="Leagues where you are a participating member."
+      >
+        {memberLeagues.length === 0 ? (
+          <Card>
+            <Text size="sm" color="text-gray-400">
+              You&apos;re not a member of any other leagues yet.
+            </Text>
+          </Card>
+        ) : (
+          <Stack gap={3}>
+            {memberLeagues.map((league) => (
+              <LeagueListItem key={league.leagueId} league={league} />
+            ))}
+          </Stack>
+        )}
+      </ProfileSection>
+    </Stack>
+  );
+}