nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
collections
/
components
/
collectionNavItem
/
CollectionNavItem.tsx
1.7 kB
59 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';
9
10interface Props {
11 name: string;
12 url: string;
13 cardCount: number;
14 accessType?: CollectionAccessType;
15 uri?: string;
16}
17
18export default function CollectionNavItem(props: Props) {
19 const { toggleMobile } = useNavbarContext();
20 const pathname = usePathname();
21 const isActive = pathname === props.url;
22 const isMargin = isMarginUri(props.uri);
23 const isOpenCollection = props.accessType === CollectionAccessType.OPEN;
24
25 return (
26 <NavLink
27 component={Link}
28 href={props.url}
29 label={props.name}
30 active={isActive}
31 color="gray"
32 classNames={{
33 root: isActive
34 ? `${styles.navLink} ${isOpenCollection ? styles.navLinkActiveGreen : styles.navLinkActive}`
35 : isOpenCollection
36 ? `${styles.navLink} ${styles.navLinkGreen}`
37 : styles.navLink,
38 }}
39 onClick={toggleMobile}
40 leftSection={isMargin ? <MarginLogo size={16} /> : undefined}
41 rightSection={
42 props.cardCount > 0 ? (
43 <Badge
44 className={
45 isActive
46 ? isOpenCollection
47 ? styles.badgeActiveGreen
48 : styles.badgeActive
49 : styles.badge
50 }
51 circle
52 >
53 {props.cardCount}
54 </Badge>
55 ) : null
56 }
57 />
58 );
59}