nandi.uk
This repository has no description
1.4 kB
49 lines
1import {
2 AspectRatio,
3 Avatar,
4 Card,
5 Group,
6 Skeleton,
7 Stack,
8} from '@mantine/core';
9
10export default function ActivityCardSkeleton() {
11 return (
12 <Stack component="article" gap={5} justify="stretch" h={'100%'}>
13 <Card withBorder radius={'lg'} p={'sm'} flex={1}>
14 <Stack justify="space-between" flex={1}>
15 <Group justify="space-between" align="start" gap={'lg'}>
16 <Stack gap={'xs'} flex={1}>
17 <Stack gap={5}>
18 {/* Domain */}
19 <Skeleton w={80} h={21} />
20 {/* Title */}
21 <Skeleton w={'100%'} h={25} />
22 </Stack>
23
24 {/* Description */}
25 <Stack gap={5}>
26 <Skeleton w={'100%'} h={16} />
27 <Skeleton w={'100%'} h={16} />
28 <Skeleton w={'100%'} h={16} />
29 </Stack>
30 </Stack>
31
32 <AspectRatio ratio={1 / 1}>
33 <Skeleton w={75} h={75} />
34 </AspectRatio>
35 </Group>
36
37 {/* Url card actions */}
38 <Group justify="space-between">
39 <Group gap={'xs'}>
40 <Skeleton w={60} h={26} radius={'xl'} />
41 <Skeleton w={54} h={26} radius={'xl'} />
42 </Group>
43 <Skeleton w={26} h={26} circle />
44 </Group>
45 </Stack>
46 </Card>
47 </Stack>
48 );
49}