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