BottomNav

import {HiAcademicCap, HiCog, HiUserCircle, HiAdjustments} from 'react-icons/hi'

const NavItem = ({Icon, text}: { Icon: any; text: string }) => {
    return (
        <a href={"#"} className={"w-full text-center block py-2 hover:bg-blue-400 hover:text-white transition duration-200"}>
            {Icon
                ? <Icon className={"w-6 h-6 mb-1 mx-auto"}/>
                : <div className={"w-6 h-6 mb-1 mx-auto"}/>}
            {text}
        </a>
    )
}

export default function BottomNav() {
    return (
        <nav className={"fixed bottom-0 inset-x-0 bg-blue-300 w-screen h-16"}>
            <div className={"fixed bottom-0 inset-x-0 text-blue-900 flex justify-between font-bold text-sm md:max-w-md md:mx-auto pr-auto"}>
                <NavItem Icon={HiAcademicCap} text={"Home"}/>
                <NavItem Icon={HiAdjustments} text={"Features"}/>
                <NavItem Icon={HiUserCircle} text={"Profile"}/>
                <NavItem Icon={HiCog} text={"Settings"}/>
            </div>
        </nav>
    );
}