Tabs

import { Tab, TabList, Tabs, type TabsVariant } from "@/registry/ds/tabs";

const variants: TabsVariant[] = ["underline", "solid", "segmented", "outline"];

export default function TabsVariants() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-8">
      {variants.map((variant) => (
        <div key={variant} className="flex flex-col gap-2">
          <span className="text-xs font-medium uppercase tracking-wide text-fg-subtle">{variant}</span>
          <Tabs variant={variant} defaultValue="1">
            <TabList aria-label={`Ejemplo ${variant}`}>
              <Tab value="1">General</Tab>
              <Tab value="2">Miembros</Tab>
              <Tab value="3">Facturación</Tab>
            </TabList>
          </Tabs>
        </div>
      ))}
    </div>
  );
}

import { Badge } from "@/registry/ds/badge";
import { Home } from "@/registry/ds/icons";
import { Tab, TabList, Tabs } from "@/registry/ds/tabs";

export default function TabsExtras() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-8">
      <Tabs defaultValue="inicio">
        <TabList aria-label="Con icono y contador">
          <Tab value="inicio" icon={<Home />}>Inicio</Tab>
          <Tab value="mensajes" badge={<Badge size="sm">2</Badge>}>Mensajes</Tab>
          <Tab value="tareas" badge={<Badge size="sm">14</Badge>}>Tareas</Tab>
        </TabList>
      </Tabs>
      <Tabs variant="solid" radius="semi" size="sm" defaultValue="dia">
        <TabList aria-label="Solid, semi, small">
          <Tab value="dia">Día</Tab>
          <Tab value="semana">Semana</Tab>
          <Tab value="mes">Mes</Tab>
        </TabList>
      </Tabs>
    </div>
  );
}