76 lines
1.8 KiB
TypeScript
76 lines
1.8 KiB
TypeScript
import {
|
|
Paper,
|
|
Text,
|
|
Group,
|
|
Box,
|
|
Stack,
|
|
Divider
|
|
} from "@mantine/core";
|
|
import { useTeam } from "../queries";
|
|
import Avatar from "@/components/avatar";
|
|
import SongSummary from "./team-form/song-summary";
|
|
|
|
interface TeamCardProps {
|
|
teamId: string;
|
|
}
|
|
|
|
const TeamCard = ({ teamId }: TeamCardProps) => {
|
|
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>
|
|
);
|
|
}
|
|
|
|
const song = {
|
|
song_id: team.song_id,
|
|
song_name: team.song_name,
|
|
song_artist: team.song_artist,
|
|
song_album: team.song_album,
|
|
song_start: team.song_start,
|
|
song_end: team.song_end,
|
|
song_image_url: team.song_image_url,
|
|
};
|
|
|
|
return (
|
|
<Paper
|
|
withBorder
|
|
radius="lg"
|
|
shadow="xs"
|
|
>
|
|
<Stack gap={2}>
|
|
<Group gap="md" align="center" p="xs">
|
|
<Avatar
|
|
name={team.name}
|
|
size={40}
|
|
radius="md"
|
|
src={team.logo ? `/api/files/teams/${team.id}/${team.logo}` : undefined}
|
|
style={{
|
|
backgroundColor: team.primary_color || undefined,
|
|
color: team.accent_color || undefined,
|
|
}}
|
|
/>
|
|
<Box style={{ flex: 1, minWidth: 0 }}>
|
|
<Text size="md" fw={600} lineClamp={1} mb={2}>
|
|
{team.name}
|
|
</Text>
|
|
<Text size="sm" c="dimmed" lineClamp={1}>
|
|
{team.players?.map(p => `${p.first_name} ${p.last_name}`).join(', ')}
|
|
</Text>
|
|
</Box>
|
|
</Group>
|
|
<Divider />
|
|
<Box p="sm">
|
|
<SongSummary song={song} />
|
|
</Box>
|
|
</Stack>
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
export default TeamCard; |