nandi.uk
This repository has no description
1.4 kB
56 lines
1'use client';
2
3import { IconType } from 'react-icons/lib';
4import { ActionIcon, Anchor, Stack, Text } from '@mantine/core';
5
6import { ReactElement, isValidElement } from 'react';
7import { usePathname } from 'next/navigation';
8import { useNavbarContext } from '@/providers/navbar';
9
10interface Props {
11 href: string;
12 title?: string;
13 icon: IconType | ReactElement;
14}
15
16export default function BottomBarItem(props: Props) {
17 const pathname = usePathname();
18 const isActive = pathname === props.href;
19 const { toggleMobile, mobileOpened } = useNavbarContext();
20
21 const renderIcon = () => {
22 // If the icon is already a React element, just return it
23 if (isValidElement(props.icon)) return props.icon;
24
25 // Otherwise, it's an IconType component, so render it manually
26 const IconComponent = props.icon as IconType;
27 return <IconComponent size={22} />;
28 };
29
30 return (
31 <Anchor
32 href={props.href}
33 underline="never"
34 onClick={() => {
35 if (mobileOpened) {
36 toggleMobile();
37 }
38 }}
39 >
40 <Stack gap={0} align="center">
41 <ActionIcon
42 variant={isActive ? 'light' : 'transparent'}
43 size={'lg'}
44 color="gray"
45 >
46 {renderIcon()}
47 </ActionIcon>
48 {props.title && (
49 <Text fz={'sm'} fw={600} c={isActive ? 'bright' : 'gray'}>
50 {props.title}
51 </Text>
52 )}
53 </Stack>
54 </Anchor>
55 );
56}