87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import {
|
|
Stack,
|
|
Group,
|
|
Box,
|
|
Container,
|
|
Divider,
|
|
Skeleton,
|
|
} from "@mantine/core";
|
|
|
|
const PlayerListItemSkeleton = () => {
|
|
return (
|
|
<Box p="md">
|
|
<Group justify="space-between" align="center" w="100%">
|
|
<Group gap="sm" align="center">
|
|
<Skeleton height={45} circle />
|
|
<Stack gap={2}>
|
|
<Group gap='xs'>
|
|
<Skeleton height={16} width={120} />
|
|
<Skeleton height={12} width={60} />
|
|
<Skeleton height={12} width={80} />
|
|
</Group>
|
|
<Group gap="md" ta="center">
|
|
<Stack gap={0}>
|
|
<Skeleton height={10} width={25} />
|
|
<Skeleton height={10} width={30} />
|
|
</Stack>
|
|
<Stack gap={0}>
|
|
<Skeleton height={10} width={10} />
|
|
<Skeleton height={10} width={15} />
|
|
</Stack>
|
|
<Stack gap={0}>
|
|
<Skeleton height={10} width={10} />
|
|
<Skeleton height={10} width={15} />
|
|
</Stack>
|
|
<Stack gap={0}>
|
|
<Skeleton height={10} width={20} />
|
|
<Skeleton height={10} width={25} />
|
|
</Stack>
|
|
<Stack gap={0}>
|
|
<Skeleton height={10} width={25} />
|
|
<Skeleton height={10} width={20} />
|
|
</Stack>
|
|
<Stack gap={0}>
|
|
<Skeleton height={10} width={15} />
|
|
<Skeleton height={10} width={25} />
|
|
</Stack>
|
|
<Stack gap={0}>
|
|
<Skeleton height={10} width={15} />
|
|
<Skeleton height={10} width={25} />
|
|
</Stack>
|
|
</Group>
|
|
</Stack>
|
|
</Group>
|
|
</Group>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const PlayerStatsTableSkeleton = () => {
|
|
return (
|
|
<Container size="100%" px={0}>
|
|
<Stack gap="xs">
|
|
<Box px="md" pb="xs">
|
|
<Skeleton height={40} />
|
|
</Box>
|
|
|
|
<Group px="md" justify="space-between" align="center">
|
|
<Skeleton height={12} width={100} />
|
|
<Group gap="xs">
|
|
<Skeleton height={12} width={200} />
|
|
</Group>
|
|
</Group>
|
|
|
|
<Stack>
|
|
{Array(10).fill(null).map((_, index) => (
|
|
<Box key={index}>
|
|
<PlayerListItemSkeleton />
|
|
{index < 9 && <Divider />}
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default PlayerStatsTableSkeleton; |