kit-ui/components/ui/mobile-tabs.tsx

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

interface Tab {
  value: string;
  label: string;
}

interface MobileTabsProps {
  tabs: Tab[];
  active: string;
  onChange: (value: string) => void;
}

export function MobileTabs({ tabs, active, onChange }: MobileTabsProps) {
  return (
    <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
      {tabs.map(({ value, label }) => (
        <button
          key={value}
          onClick={() => onChange(value)}
          className={cn(
            'flex-1 py-1.5 rounded-lg text-sm font-medium transition-all',
            active === value
              ? 'bg-primary text-primary-foreground shadow-sm'
              : 'text-muted-foreground hover:text-foreground'
          )}
        >
          {label}
        </button>
      ))}
    </div>
  );
}