nandi.uk
This repository has no description
1.2 kB
43 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';
6import { useColorScheme } from '@mantine/hooks';
7
8interface Props {
9 href: string;
10 icon: IconType | ReactElement;
11}
12
13export default function BottomBarItem(props: Props) {
14 const colorScheme = useColorScheme();
15 const pathname = usePathname();
16 const isActive = pathname === props.href;
17
18 const renderIcon = () => {
19 // If the icon is already a React element, just return it
20 if (isValidElement(props.icon)) return props.icon;
21
22 // Otherwise, it's an IconType component, so render it manually
23 const IconComponent = props.icon as IconType;
24 return <IconComponent size={22} />;
25 };
26
27 return (
28 <ActionIcon
29 component={Link}
30 href={props.href}
31 variant={isActive ? 'light' : 'transparent'}
32 size={'lg'}
33 bg={
34 isActive
35 ? `${colorScheme === 'dark' ? 'dark.5' : 'gray.1'}`
36 : 'transparent'
37 }
38 color="gray"
39 >
40 {renderIcon()}
41 </ActionIcon>
42 );
43}