Mobile tab bar

import * as React from "react";
import Link from "next/link";
import { cn } from "@/lib/utils";

export type MobileTabBarItem = {
  label: string;
  href: string;
  /** A 20px icon, for example a lucide icon. */
  icon: React.ReactNode;
  /** Marks the current page. Sets aria-current and the foreground colour. */
  active?: boolean;
  /** A small count on the icon. Keep it to two characters. */
  badge?: number | string;
};

type MobileTabBarProps = Omit<React.ComponentProps<"nav">, "children"> & {
  /** Up to five items; more are dropped. */
  items: MobileTabBarItem[];
  /** fixed pins it to the bottom of the viewport; static keeps it in flow. */
  position?: "fixed" | "static";
};

/**
 * A bottom tab bar for phones: up to five links with an icon and a short label.
 * 56px tall, hairline top, pads for the home indicator on notched phones.
 */
export function MobileTabBar({ items, position = "static", className, ...props }: MobileTabBarProps) {
  return (
    <nav
      data-slot="mobile-tab-bar"
      aria-label="Primary"
      className={cn(
        "w-full border-t bg-background pb-[env(safe-area-inset-bottom)]",
        position === "fixed" && "fixed inset-x-0 bottom-0 z-20",
        className,
      )}
      {...props}
    >
      <ul className="m-0 flex h-14 list-none items-stretch p-0">
        {items.slice(0, 5).map((item) => (
          <li key={`${item.href}-${item.label}`} className="flex min-w-0 flex-1">
            <Link
              href={item.href}
              aria-current={item.active ? "page" : undefined}
              className={cn(
                "flex w-full min-w-0 flex-col items-center justify-center gap-1 rounded-sm px-1 text-xs transition-colors duration-100 ease-out outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset",
                item.active ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground",
              )}
            >
              <span className="relative inline-flex [&_svg]:size-5" aria-hidden="true">
                {item.icon}
                {item.badge !== undefined && (
                  <span className="absolute -top-1 -right-2 inline-flex size-4 items-center justify-center rounded-full bg-primary font-mono text-[10px] leading-none text-primary-foreground">
                    {item.badge}
                  </span>
                )}
              </span>
              <span className="max-w-full truncate leading-none">{item.label}</span>
              {item.badge !== undefined && <span className="sr-only">, {item.badge}</span>}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}