nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
collections
/
components
/
collectionsNavList
/
CollectionsNavList.tsx
1.5 kB
51 lines
1import Link from 'next/link';
2import { NavLink, Stack } from '@mantine/core';
3import { BiCollection, BiRightArrowAlt } from 'react-icons/bi';
4import CollectionNavItem from '../collectionNavItem/CollectionNavItem';
5import useCollections from '../../lib/queries/useCollections';
6import { useToggle } from '@mantine/hooks';
7import CollectionsNavListError from './Error.CollectionsNavList';
8import CreateCollectionShortcut from '../createCollectionShortcut/CreateCollectionShortcut';
9
10export default function CollectionsNavList() {
11 const { data, error } = useCollections();
12 const [opened, toggleMenu] = useToggle([true, false]);
13
14 if (error) {
15 return <CollectionsNavListError />;
16 }
17
18 return (
19 <NavLink
20 variant="subtle"
21 c="gray"
22 label="Collections"
23 leftSection={<BiCollection size={22} />}
24 opened={opened}
25 onClick={() => toggleMenu()}
26 >
27 <NavLink
28 component={Link}
29 href="/collections"
30 label={'View all'}
31 variant="subtle"
32 c="blue"
33 leftSection={<BiRightArrowAlt size={25} />}
34 />
35
36 {/* Self-contained shortcut to prevent won't re-render this whole list when interacted with */}
37 <CreateCollectionShortcut />
38
39 <Stack gap={0}>
40 {data.collections.map((c) => (
41 <CollectionNavItem
42 key={c.id}
43 name={c.name}
44 url={`/collections/${c.id}`}
45 cardCount={c.cardCount}
46 />
47 ))}
48 </Stack>
49 </NavLink>
50 );
51}