nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
home
/
components
/
recentCollections
/
Skeleton.RecentCollections.tsx
1.0 kB
32 lines
1import CollectionCardSkeleton from '@/features/collections/components/collectionCard/Skeleton.CollectionCard';
2import { Stack, Group, Title, Skeleton, SimpleGrid } from '@mantine/core';
3import { BiCollection } from 'react-icons/bi';
4
5export default function RecentCollectionsSkeleton() {
6 return (
7 <Stack>
8 <Group justify="space-between">
9 <Group gap="xs">
10 <BiCollection size={22} />
11 <Title order={2}>Collections</Title>
12 </Group>
13 <Group gap="xs">
14 <Skeleton w={38} h={38} circle />
15 <Skeleton w={87} h={36} radius={'xl'} />
16 </Group>
17 </Group>
18
19 <Group gap="xs">
20 <Skeleton w={110} h={30} radius={'xl'} />
21 <Skeleton w={82} h={30} radius={'xl'} />
22 <Skeleton w={109} h={30} radius={'xl'} />
23 </Group>
24
25 <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="xs">
26 {Array.from({ length: 4 }).map((_, i) => (
27 <CollectionCardSkeleton key={i} />
28 ))}
29 </SimpleGrid>
30 </Stack>
31 );
32}