nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
collections
/
components
/
collectionNavItem
/
CollectionNavItem.tsx
1.8 kB
60 lines
1import { useNavbarContext } from '@/providers/navbar';
2import { Badge, NavLink } from '@mantine/core';
3import Link from 'next/link';
4import { usePathname } from 'next/navigation';
5import styles from './CollectionNavItem.module.css';
6import { isMarginUri } from '@/lib/utils/margin';
7import MarginLogo from '@/components/MarginLogo';
8import { CollectionAccessType } from '@semble/types';
9import { abbreviateNumber } from '@/lib/utils/text';
10
11interface Props {
12 name: string;
13 url: string;
14 cardCount: number;
15 accessType?: CollectionAccessType;
16 uri?: string;
17}
18
19export default function CollectionNavItem(props: Props) {
20 const { toggleMobile } = useNavbarContext();
21 const pathname = usePathname();
22 const isActive = pathname === props.url;
23 const isMargin = isMarginUri(props.uri);
24 const isOpenCollection = props.accessType === CollectionAccessType.OPEN;
25
26 return (
27 <NavLink
28 component={Link}
29 href={props.url}
30 label={props.name}
31 active={isActive}
32 color={isOpenCollection ? 'green' : 'gray'}
33 classNames={{
34 root: isActive
35 ? `${styles.navLink} ${isOpenCollection ? styles.navLinkActiveGreen : styles.navLinkActive}`
36 : isOpenCollection
37 ? `${styles.navLink} ${styles.navLinkGreen}`
38 : styles.navLink,
39 }}
40 onClick={toggleMobile}
41 leftSection={isMargin ? <MarginLogo size={16} /> : undefined}
42 rightSection={
43 props.cardCount > 0 ? (
44 <Badge
45 fullWidth
46 className={
47 isActive
48 ? isOpenCollection
49 ? styles.badgeActiveGreen
50 : styles.badgeActive
51 : styles.badge
52 }
53 >
54 {abbreviateNumber(props.cardCount)}
55 </Badge>
56 ) : null
57 }
58 />
59 );
60}