75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import { Box, Card, Center, Divider, Group, Skeleton, Stack } from "@mantine/core";
|
|
|
|
const StartedTournamentSkeleton = () => {
|
|
return (
|
|
<Stack gap="lg">
|
|
{/* Header skeleton */}
|
|
<Stack px="md">
|
|
<Group justify="space-between" align="flex-start">
|
|
<Box style={{ flex: 1 }}>
|
|
<Skeleton height={32} width="60%" mb="xs" />
|
|
<Skeleton height={16} width="40%" />
|
|
</Box>
|
|
<Skeleton height={60} width={60} radius="md" />
|
|
</Group>
|
|
</Stack>
|
|
|
|
{/* Match carousel skeleton */}
|
|
<Box>
|
|
<Group gap="xs" px="xl">
|
|
{Array.from({ length: 2 }).map((_, index) => (
|
|
<Card
|
|
key={index}
|
|
withBorder
|
|
radius="lg"
|
|
p="lg"
|
|
style={{ minWidth: "95%", flex: "0 0 auto" }}
|
|
>
|
|
<Stack gap="md">
|
|
{/* Match header */}
|
|
<Group justify="space-between">
|
|
<Skeleton height={14} width="30%" />
|
|
<Skeleton height={20} width={60} radius="xl" />
|
|
</Group>
|
|
|
|
{/* Teams */}
|
|
<Stack gap="sm">
|
|
<Group>
|
|
<Skeleton height={32} width={32} radius="sm" />
|
|
<Skeleton height={16} width="40%" />
|
|
<Box ml="auto">
|
|
<Skeleton height={24} width={30} />
|
|
</Box>
|
|
</Group>
|
|
<Center>
|
|
<Skeleton height={14} width={20} />
|
|
</Center>
|
|
<Group>
|
|
<Skeleton height={32} width={32} radius="sm" />
|
|
<Skeleton height={16} width="40%" />
|
|
<Box ml="auto">
|
|
<Skeleton height={24} width={30} />
|
|
</Box>
|
|
</Group>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
))}
|
|
</Group>
|
|
</Box>
|
|
|
|
{/* Actions section skeleton */}
|
|
<Box>
|
|
<Divider />
|
|
<Stack gap={0}>
|
|
<Skeleton height={48} width="100%" />
|
|
<Skeleton height={48} width="100%" />
|
|
<Skeleton height={48} width="100%" />
|
|
<Skeleton height={48} width="100%" />
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default StartedTournamentSkeleton; |