Bottom Navigation

import { BottomNavigation, BottomNavigationItem } from "@/components/ui/bottom-navigation";

export default function Example() {
  return <BottomNavigation />;
}

"use client";

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const BottomNavigation = forwardRef(({ className, ...props }, ref) => (
  <nav ref={ref} className={cn("fixed bottom-0 left-0 right-0 z-50 flex h-16 items-center justify-around border-t bg-background/95 backdrop-blur-sm", className)} {...props} />
));
BottomNavigation.displayName = "BottomNavigation";

const BottomNavigationItem = forwardRef(({ className, active, icon, label, ...props }, ref) => (
  <button ref={ref} className={cn("flex flex-col items-center gap-0.5 px-3 py-1 text-xs transition-colors", active ? "text-primary" : "text-muted-foreground hover:text-foreground", className)} {...props}>
    <span className="text-xl">{icon}</span>
    {label && <span>{label}</span>}
  </button>
));
BottomNavigationItem.displayName = "BottomNavigationItem";

export { BottomNavigation, BottomNavigationItem };