regionals enrollments

src/features/tournaments/components/upcoming-tournament/enrolled-free-agent.tsx

@@ -1,13 +1,17 @@
 import { Group, Stack, Text, Card, Badge, Box, ActionIcon } from "@mantine/core";
-import { UserIcon, PhoneIcon } from "@phosphor-icons/react";
+import { PhoneIcon, CheckCircleIcon } from "@phosphor-icons/react";
 import { useFreeAgents } from "../../queries";
 import UnenrollFreeAgent from "./unenroll-free-agent";
 import toast from "@/lib/sonner";
+import { useAuth } from "@/contexts/auth-context";
+import PlayerAvatar from "@/components/player-avatar";
 
-const EnrolledFreeAgent: React.FC<{ tournamentId: string }> = ({
-  tournamentId
+const EnrolledFreeAgent: React.FC<{ tournamentId: string, isRegional?: boolean }> = ({
+  tournamentId,
+  isRegional
 }) => {
   const { data: freeAgents } = useFreeAgents(tournamentId);
+  const { user } = useAuth();
 
   const copyToClipboard = async (phone: string) => {
     try {
@@ -38,33 +42,66 @@ const EnrolledFreeAgent: React.FC<{ tournamentId: string }> = ({
     }
   };
 
+  if (isRegional) {
+    return (
+      <Stack gap="sm">
+        <Card withBorder radius="md" p="md">
+          <Group justify="space-between" align="center" wrap="nowrap">
+            <Group gap="md" align="center">
+              <PlayerAvatar name={`${user?.first_name} ${user?.last_name}`} size={48} />
+              <Box>
+                <Text size="sm" fw={600}>
+                  {user?.first_name} {user?.last_name}
+                </Text>
+                <Group gap={4} align="center">
+                  <CheckCircleIcon size={14} weight="fill" color="var(--mantine-color-green-6)" />
+                  <Text size="xs" c="green" fw={500}>
+                    Enrolled
+                  </Text>
+                </Group>
+              </Box>
+            </Group>
+          </Group>
+        </Card>
+
+        <Text size="xs" c="dimmed" ta="center">
+          Partners will be randomly assigned when enrollment closes
+        </Text>
+
+        <UnenrollFreeAgent tournamentId={tournamentId} isRegional={isRegional} />
+      </Stack>
+    );
+  }
+
   return (
-    <Stack gap="md">
-      <Group justify="space-between" align="center">
-        <Group gap="xs" align="center">
-          <UserIcon size={16} />
-          <Text size="sm" fw={500}>
-            Enrolled as Free Agent
-          </Text>
-        </Group>
-      </Group>
+    <Stack gap="sm">
+      <Text size="sm" fw={600} c="green">
+        ✓ Enrolled as Free Agent
+      </Text>
 
       <Text size="xs" c="dimmed">
-        You're on the free agent list. Other free agents looking for teams:
+        Other players looking for teammates:
       </Text>
 
       {freeAgents.length > 1 ? (
-        <Card withBorder radius="md" p="sm">
+        <Stack gap="xs">
+          <Group gap="xs" align="center">
+            <Text size="xs" fw={500} c="dimmed">
+              Free Agents
+            </Text>
+            <Badge variant="light" size="xs" color="blue">
+              {freeAgents.length}
+            </Badge>
+          </Group>
+
           <Stack gap="xs">
             {freeAgents
               .filter(agent => agent.player)
               .map((agent) => (
-                <Group key={agent.id} justify="space-between" align="center" wrap="nowrap">
-                  <Box style={{ flex: 1, minWidth: 0 }}>
-                    <Text size="sm" fw={500} truncate>
-                      {agent.player?.first_name} {agent.player?.last_name}
-                    </Text>
-                  </Box>
+                <Group key={agent.id} justify="space-between" align="center" wrap="nowrap" p="xs" style={{ borderRadius: '8px', backgroundColor: 'var(--mantine-color-gray-0)' }}>
+                  <Text size="sm" fw={500} truncate>
+                    {agent.player?.first_name} {agent.player?.last_name}
+                  </Text>
                   {agent.phone && (
                     <Group gap={4} align="center" style={{ flexShrink: 0 }}>
                       <ActionIcon
@@ -87,27 +124,15 @@ const EnrolledFreeAgent: React.FC<{ tournamentId: string }> = ({
                   )}
                 </Group>
               ))}
-
-            {freeAgents.length > 1 && (
-              <Badge
-                variant="light"
-                size="xs"
-                color="blue"
-                style={{ alignSelf: 'flex-start', marginTop: '4px' }}
-              >
-                {freeAgents.length} free agents total
-              </Badge>
-            )}
           </Stack>
-        </Card>
+        </Stack>
       ) : (
-        <Card withBorder radius="md" p="sm">
-          <Text size="sm" c="dimmed" ta="center">
-            You're the only free agent so far
-          </Text>
-        </Card>
+        <Text size="xs" c="dimmed" py="sm">
+          You're the first free agent!
+        </Text>
       )}
-      <UnenrollFreeAgent tournamentId={tournamentId} />
+
+      <UnenrollFreeAgent tournamentId={tournamentId} isRegional={isRegional} />
     </Stack>
   );
 };