60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
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"
|
|
isRegional={true}
|
|
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;
|