44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { Box, Card, Divider, Flex, Group, Skeleton, Stack } from "@mantine/core";
|
|
|
|
const UpcomingTournamentSkeleton = () => {
|
|
return (
|
|
<Stack gap="lg">
|
|
<Flex px="md" justify="center" w="100%">
|
|
<Skeleton height={318} width={318} radius="lg" />
|
|
</Flex>
|
|
<Stack align="center" gap={2}>
|
|
<Skeleton height={16} w="30%" mb="md" />
|
|
<Skeleton height={16} w="30%" />
|
|
</Stack>
|
|
|
|
<Stack px="md">
|
|
<Card
|
|
withBorder
|
|
p="lg"
|
|
style={{
|
|
borderRadius:
|
|
"2px 2px var(--mantine-radius-lg) var(--mantine-radius-lg)",
|
|
}}
|
|
>
|
|
<Skeleton height={14} width="80%" mb={16} />
|
|
<Group mb="sm" gap="xs" align="center">
|
|
<Skeleton height={32} width={16} />
|
|
<Skeleton height={32} width="20%" />
|
|
<Box ml="auto">
|
|
<Skeleton height={32} width={80} radius="sm" />
|
|
</Box>
|
|
</Group>
|
|
<Group mb="sm" gap="xs" align="center">
|
|
<Skeleton height={32} width={16} />
|
|
<Skeleton height={32} width="20%" />
|
|
<Box ml="auto">
|
|
<Skeleton height={32} width={80} radius="sm" />
|
|
</Box>
|
|
</Group>
|
|
</Card>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default UpcomingTournamentSkeleton; |