nandi.uk
This repository has no description
1.7 kB
65 lines
1'use client';
2
3import {
4 AppShellSection,
5 AppShellNavbar,
6 ScrollArea,
7 Divider,
8 Stack,
9 Group,
10 Anchor,
11 Image,
12 Box,
13 Badge,
14 Skeleton,
15} from '@mantine/core';
16
17import SembleLogo from '@/assets/semble-logo.svg';
18import NavbarToggle from '../NavbarToggle';
19import CollectionsNavListSkeleton from '@/features/collections/components/collectionsNavList/Skeleton.CollectionsNavList';
20
21export default function NavbarSkeleton() {
22 return (
23 <AppShellNavbar p={'xs'} style={{ zIndex: 3 }}>
24 <Group justify="space-between">
25 <Anchor href={'/home'} mx={2}>
26 <Stack align="center" gap={6}>
27 <Image src={SembleLogo.src} alt="Semble logo" w={20.84} h={28} />
28 <Badge size="xs" style={{ cursor: 'pointer' }}>
29 Alpha
30 </Badge>
31 </Stack>
32 </Anchor>
33 <Box hiddenFrom="xs">
34 <NavbarToggle />
35 </Box>
36 </Group>
37
38 <AppShellSection grow component={ScrollArea}>
39 <Stack gap={'md'} mt={'xl'}>
40 {/* Profile Menu Skeleton */}
41 <Group gap="sm" m={5} wrap="nowrap">
42 <Skeleton h={38} w={38} />
43 <Skeleton height={18} width="80%" />
44 </Group>
45
46 {/* Nav Items Skeleton */}
47 <Stack gap={5}>
48 {[...Array(6)].map((_, i) => (
49 <Skeleton key={i} height={40} radius="md" />
50 ))}
51 </Stack>
52 </Stack>
53
54 <Divider mb={'sm'} mt={'18'} />
55
56 {/* Collections List Skeleton */}
57 <CollectionsNavListSkeleton />
58 </AppShellSection>
59
60 <AppShellSection>
61 <Skeleton w={'100%'} h={50} radius={'xl'} />
62 </AppShellSection>
63 </AppShellNavbar>
64 );
65}