nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
collections
/
components
/
collectionsNavList
/
CollectionsNavList.tsx
1.9 kB
59 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 useMyCollections from '../../lib/queries/useMyCollections';
6import { useToggle } from '@mantine/hooks';
7import CollectionsNavListError from './Error.CollectionsNavList';
8import CreateCollectionShortcut from '../createCollectionShortcut/CreateCollectionShortcut';
9import useMyProfile from '@/features/profile/lib/queries/useMyProfile';
10import { getRecordKey } from '@/lib/utils/atproto';
11import { useNavbarContext } from '@/providers/navbar';
12
13export default function CollectionsNavList() {
14 const { toggleMobile } = useNavbarContext();
15 const { data, error } = useMyCollections({ limit: 30 });
16 const { data: profile } = useMyProfile();
17 const [opened, toggleMenu] = useToggle([true, false]);
18
19 if (error) {
20 return <CollectionsNavListError />;
21 }
22
23 const collections =
24 data?.pages.flatMap((page) => page.collections ?? []) ?? [];
25
26 return (
27 <NavLink
28 variant="subtle"
29 c="gray"
30 label="Collections"
31 leftSection={<BiCollection size={22} />}
32 opened={opened}
33 onClick={() => toggleMenu()}
34 >
35 <CreateCollectionShortcut />
36
37 <NavLink
38 component={Link}
39 href={`/profile/${profile.handle}/collections`}
40 label="View all"
41 variant="subtle"
42 c="blue"
43 leftSection={<BiRightArrowAlt size={25} />}
44 onClick={toggleMobile}
45 />
46
47 <Stack gap={0}>
48 {collections.map((collection) => (
49 <CollectionNavItem
50 key={collection.id}
51 name={collection.name}
52 url={`/profile/${collection.author.handle}/collections/${getRecordKey(collection.uri!!)}`}
53 cardCount={collection.cardCount}
54 />
55 ))}
56 </Stack>
57 </NavLink>
58 );
59}