Bottom navigation

import * as React from "react";
import { BottomNav, BottomNavItem } from "@/components/ui/bottom-nav";
import { House, Search, Star, User } from "@/components/ui/icons";

export default function Example() {
  const [tab, setTab] = React.useState("shop");
  const go = (id: string) => (e: React.MouseEvent) => { e.preventDefault(); setTab(id); };
  return (
    <div style={{ width: 360, maxWidth: "100%" }}>
      <BottomNav>
        <BottomNavItem href="#shop" icon={<House />} active={tab === "shop"} onClick={go("shop")}>Shop</BottomNavItem>
        <BottomNavItem href="#search" icon={<Search />} active={tab === "search"} onClick={go("search")}>Search</BottomNavItem>
        <BottomNavItem href="#saved" icon={<Star />} active={tab === "saved"} onClick={go("saved")}>Saved</BottomNavItem>
        <BottomNavItem href="#me" icon={<User />} active={tab === "me"} onClick={go("me")}>Me</BottomNavItem>
      </BottomNav>
    </div>
  );
}