nandi.uk
This repository has no description
1.0 kB
37 lines
1import { IconType } from 'react-icons/lib';
2import { ActionIcon } from '@mantine/core';
3import { usePathname } from 'next/navigation';
4import Link from 'next/link';
5import { ReactElement, isValidElement } from 'react';
6
7interface Props {
8 href: string;
9 icon: IconType | ReactElement;
10}
11
12export default function BottomBarItem(props: Props) {
13 const pathname = usePathname();
14 const isActive = pathname === props.href;
15
16 const renderIcon = () => {
17 // If the icon is already a React element, just return it
18 if (isValidElement(props.icon)) return props.icon;
19
20 // Otherwise, it's an IconType component, so render it manually
21 const IconComponent = props.icon as IconType;
22 return <IconComponent size={22} />;
23 };
24
25 return (
26 <ActionIcon
27 component={Link}
28 href={props.href}
29 variant={isActive ? 'light' : 'transparent'}
30 size={'lg'}
31 bg={isActive ? 'gray.1' : 'transparent'}
32 color={isActive ? 'dark' : 'gray'}
33 >
34 {renderIcon()}
35 </ActionIcon>
36 );
37}