nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
profile
/
containers
/
profileContainer
/
Skeleton.ProfileContainer.tsx
1.5 kB
55 lines
1import UrlCardSkeleton from '@/features/cards/components/urlCard/Skeleton.UrlCard';
2import CollectionCardSkeleton from '@/features/collections/components/collectionCard/Skeleton.CollectionCard';
3import {
4 Container,
5 Grid,
6 GridCol,
7 Group,
8 SimpleGrid,
9 Skeleton,
10 Stack,
11 Title,
12} from '@mantine/core';
13
14export default function ProfileContainerSkeleton() {
15 return (
16 <Container p={'xs'} size={'xl'}>
17 <Stack gap={50}>
18 {/* Cards */}
19 <Stack>
20 <Group justify="space-between">
21 <Title order={2} fz={'h3'}>
22 Cards
23 </Title>
24 <Skeleton w={87} h={36} radius={'xl'} />
25 </Group>
26
27 <Grid gap="xs">
28 {Array.from({ length: 4 }).map((_, i) => (
29 <GridCol key={i} span={{ base: 12, xs: 6, sm: 4, lg: 3 }}>
30 <UrlCardSkeleton />
31 </GridCol>
32 ))}
33 </Grid>
34 </Stack>
35
36 {/* Collections */}
37 <Stack>
38 <Group justify="space-between">
39 <Title order={2} fz={'h3'}>
40 Collections
41 </Title>
42
43 <Skeleton w={87} h={36} radius={'xl'} />
44 </Group>
45
46 <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="xs">
47 {Array.from({ length: 4 }).map((_, i) => (
48 <CollectionCardSkeleton key={i} />
49 ))}
50 </SimpleGrid>
51 </Stack>
52 </Stack>
53 </Container>
54 );
55}