1  import { HeartIcon, HomeIcon, PlusIcon, User2Icon } from "lucide-react";
 2  import { Button } from "./ui/button";
 3  import Link from "next/link";
 4  import {
 5    NavigationMenu,
 6    NavigationMenuContent,
 7    NavigationMenuIndicator,
 8    NavigationMenuItem,
 9    NavigationMenuLink,
10    NavigationMenuList,
11    NavigationMenuTrigger,
12    NavigationMenuViewport,
13  } from "@/components/ui/navigation-menu";
14  import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
15  
16  export const BottomBar = () => {
17    return (
18      <div className="fixed bottom-4 left-1/2 flex -translate-x-1/2 gap-4 rounded-lg border bg-background/70 bg-opacity-70 p-2 shadow-lg backdrop-blur-xl">
19        <div className="flex w-full items-center whitespace-nowrap">
20          {/* <Link href="/">
21            <HomeIcon className=" sm:h-6 sm:w-6" />
22          </Link>
23          <div className="h-2 w-2 text-muted-foreground/20"></div>
24          <Link href="/">
25            <span className="text-lg font-bold">Frog Pal</span>
26          </Link> */}
27          <NavigationMenu>
28            <NavigationMenuList>
29              <NavigationMenuItem>
30                <Link href="/" legacyBehavior passHref>
31                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
32                    Home
33                  </NavigationMenuLink>
34                </Link>
35              </NavigationMenuItem>
36              <NavigationMenuItem>
37                <Link href="/volume-chart" legacyBehavior passHref>
38                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
39                    List
40                  </NavigationMenuLink>
41                </Link>
42              </NavigationMenuItem>
43            </NavigationMenuList>
44          </NavigationMenu>
45        </div>
46      </div>
47    );
48  };
49  
50  export default BottomBar;