enrollment polish

src/features/teams/components/regional-team-card.tsx

@@ -0,0 +1,58 @@
+import {
+  Paper,
+  Text,
+  Group,
+  Box,
+  Title
+} from "@mantine/core";
+import { useTeam } from "../queries";
+import TeamAvatar from "@/components/team-avatar";
+
+interface RegionalTeamCardProps {
+  teamId: string;
+}
+
+const RegionalTeamCard = ({ teamId }: RegionalTeamCardProps) => {
+  const { data: team, error } = useTeam(teamId);
+
+  if (error || !team) {
+    return (
+      <Paper p="sm" withBorder radius="md">
+        <Text c="red" ta="center" size="sm">
+          Failed to load team
+        </Text>
+      </Paper>
+    );
+  }
+
+  return (
+    <Paper
+      withBorder
+      radius="lg"
+      shadow="xs"
+      p="xs"
+    >
+      <Group gap="md" align="center">
+        <TeamAvatar
+          team={team}
+          size={40}
+          radius="md"
+          style={{
+            backgroundColor: team.primary_color || undefined,
+            color: team.accent_color || undefined,
+          }}
+        />
+        <Box style={{ flex: 1, minWidth: 0 }}>
+          <Title order={5} lineClamp={1}>
+            {team.name}
+          </Title>
+          <Text size="sm" c="dimmed" lineClamp={1}>
+            {team.players?.map(p => `${p.first_name} ${p.last_name}`).join(', ')}
+          </Text>
+        </Box>
+      </Group>
+    </Paper>
+  );
+};
+
+export default RegionalTeamCard;