73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import { Stack, Skeleton, Group, Paper, Divider } from "@mantine/core";
|
|
|
|
const TeamHeadToHeadSkeleton = () => {
|
|
return (
|
|
<Stack gap="md">
|
|
<Paper p="md" withBorder radius="md">
|
|
<Stack gap="sm">
|
|
<Group justify="center" gap="xs">
|
|
<Skeleton height={28} width={140} />
|
|
<Skeleton height={20} width={20} />
|
|
<Skeleton height={28} width={140} />
|
|
</Group>
|
|
|
|
<Group justify="center" gap="lg">
|
|
<Stack gap={0} align="center">
|
|
<Skeleton height={32} width={40} />
|
|
<Skeleton height={16} width={100} mt={4} />
|
|
</Stack>
|
|
<Skeleton height={24} width={10} />
|
|
<Stack gap={0} align="center">
|
|
<Skeleton height={32} width={40} />
|
|
<Skeleton height={16} width={100} mt={4} />
|
|
</Stack>
|
|
</Group>
|
|
|
|
<Group justify="center">
|
|
<Skeleton height={16} width={150} />
|
|
</Group>
|
|
</Stack>
|
|
</Paper>
|
|
|
|
<Stack gap={0}>
|
|
<Skeleton height={18} width={130} ml="md" mb="xs" />
|
|
|
|
<Paper withBorder>
|
|
<Stack gap={0}>
|
|
<Group justify="space-between" px="md" py="sm">
|
|
<Skeleton height={20} width={60} />
|
|
<Skeleton height={16} width={80} />
|
|
<Skeleton height={20} width={60} />
|
|
</Group>
|
|
<Divider />
|
|
|
|
<Group justify="space-between" px="md" py="sm">
|
|
<Skeleton height={20} width={60} />
|
|
<Skeleton height={16} width={100} />
|
|
<Skeleton height={20} width={60} />
|
|
</Group>
|
|
<Divider />
|
|
|
|
<Group justify="space-between" px="md" py="sm">
|
|
<Skeleton height={20} width={60} />
|
|
<Skeleton height={16} width={110} />
|
|
<Skeleton height={20} width={60} />
|
|
</Group>
|
|
</Stack>
|
|
</Paper>
|
|
</Stack>
|
|
|
|
<Stack gap="xs">
|
|
<Skeleton height={18} width={150} ml="md" />
|
|
<Stack gap="sm" p="md">
|
|
<Skeleton height={100} />
|
|
<Skeleton height={100} />
|
|
<Skeleton height={100} />
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default TeamHeadToHeadSkeleton;
|