free agents

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

@@ -0,0 +1,95 @@
+import { Group, Stack, Text, Card, Badge, Box, ActionIcon } from "@mantine/core";
+import { UserIcon, PhoneIcon } from "@phosphor-icons/react";
+import { useFreeAgents } from "../../queries";
+import UnenrollFreeAgent from "./unenroll-free-agent";
+import toast from "@/lib/sonner";
+
+const EnrolledFreeAgent: React.FC<{ tournamentId: string }> = ({
+  tournamentId
+}) => {
+  const { data: freeAgents } = useFreeAgents(tournamentId);
+
+  const copyToClipboard = async (phone: string) => {
+    try {
+      await navigator.clipboard.writeText(phone);
+      toast.success("Phone number copied!");
+    } catch (err) {
+      toast.success("Failed to copy");
+    }
+  };
+
+  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>
+
+      <Text size="xs" c="dimmed">
+        You're on the free agent list. Other free agents looking for teams:
+      </Text>
+
+      {freeAgents.length > 1 ? (
+        <Card withBorder radius="md" p="sm">
+          <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>
+                  {agent.phone && (
+                    <Group gap={4} align="center" style={{ flexShrink: 0 }}>
+                      <ActionIcon
+                        variant="subtle"
+                        size="sm"
+                        onClick={() => copyToClipboard(agent.phone!)}
+                        style={{ cursor: 'pointer' }}
+                      >
+                        <PhoneIcon size={12} />
+                      </ActionIcon>
+                      <Text
+                        size="xs"
+                        c="dimmed"
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => copyToClipboard(agent.phone!)}
+                      >
+                        {agent.phone}
+                      </Text>
+                    </Group>
+                  )}
+                </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>
+      ) : (
+        <Card withBorder radius="md" p="sm">
+          <Text size="sm" c="dimmed" ta="center">
+            You're the only free agent so far
+          </Text>
+        </Card>
+      )}
+      <UnenrollFreeAgent tournamentId={tournamentId} />
+    </Stack>
+  );
+};
+
+export default EnrolledFreeAgent;