"use client";

import * as React from "react";

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

export interface TabBarItem {
  id: string;
  label: string;
  icon?: React.ReactNode;
  badge?: string | number;
}

export interface TabBarProps extends React.HTMLAttributes<HTMLElement> {
  items: TabBarItem[];
  activeId?: string;
  onTabChange?: (id: string) => void;
}

export function TabBar({
  items,
  activeId,
  onTabChange,
  className,
  ...props
}: TabBarProps) {
  return (
    <nav
      className={cn(
        "w-full max-w-md rounded-3xl border border-border bg-card px-4 py-3",
        className
      )}
      {...props}
    >
      <ul className="flex items-center justify-between">
        {items.map((item) => {
          const isActive = item.id === activeId;

          return (
            <li key={item.id}>
              <button
                type="button"
                onClick={() => onTabChange?.(item.id)}
                className={cn(
                  "flex flex-col items-center gap-1 text-xs font-medium transition-colors",
                  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
                  isActive
                    ? "text-primary"
                    : "text-foreground hover:text-primary"
                )}
                aria-current={isActive ? "page" : undefined}
              >
                {item.icon ? (
                  <span className="flex h-6 w-6 items-center justify-center">
                    {item.icon}
                  </span>
                ) : null}
                <span>{item.label}</span>
                {item.badge !== undefined ? (
                  <span className="inline-flex min-w-5 items-center justify-center rounded-full border border-border bg-card px-1 text-[10px] font-semibold text-primary">
                    {item.badge}
                  </span>
                ) : null}
              </button>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}
Tab Bar

Dependencies

Files

Installation
