TabList

import { Tab, TabList, TabPanel, Tabs } from "@nexera-ui/react";

const variants = ["underline", "pill", "enclosed"] as const;

const sections = ["Overview", "Documents", "Time off", "Payroll", "Benefits"] as const;

export function Variants() {
  return (
    <div className="flex flex-col gap-6">
      {variants.map((variant) => (
        <Tabs key={variant} defaultSelectedKey="Overview">
          <TabList aria-label={`Employee (${variant})`} variant={variant}>
            {sections.map((section) => (
              <Tab key={section} id={section} label={section} />
            ))}
          </TabList>
          <TabPanel id="Overview" className="sr-only">
            Overview panel
          </TabPanel>
        </Tabs>
      ))}
    </div>
  );
}

import { Tab, TabList, TabPanel, Tabs } from "@nexera-ui/react";

const variants = ["underline", "pill", "enclosed"] as const;

export function Overflow() {
  return (
    <div className="flex max-w-sm flex-col gap-6">
      {variants.map((variant) => (
        <Tabs key={variant} defaultSelectedKey="Overview">
          <TabList aria-label={`Employee records (${variant})`} variant={variant}>
            {[...sections, "Performance", "Training", "Assets", "Notes"].map((section) => (
              <Tab key={section} id={section} label={section} />
            ))}
          </TabList>
          <TabPanel id="Overview" className="sr-only">
            Overview panel
          </TabPanel>
        </Tabs>
      ))}
    </div>
  );
}

import { Tab, TabList, TabPanel, Tabs } from "@nexera-ui/react";

const sections = ["Overview", "Documents", "Time off", "Payroll", "Benefits"] as const;

export function ManualActivation() {
  return (
    <Tabs defaultSelectedKey="Overview" keyboardActivation="manual">
      <TabList aria-label="Reports" variant="pill">
        {sections.slice(0, 3).map((section) => (
          <Tab key={section} id={section} label={section} />
        ))}
      </TabList>
      {sections.slice(0, 3).map((section) => (
        <TabPanel key={section} id={section} className="py-4">
          {section} report.
        </TabPanel>
      ))}
    </Tabs>
  );
}

import { TabList, TabPanel, Tabs, VerticalTab } from "@nexera-ui/react";
import { LuBell, LuLock, LuUser } from "react-icons/lu";

export function Vertical() {
  return (
    <Tabs orientation="vertical" defaultSelectedKey="profile" className="flex-wrap gap-6">
      <TabList aria-label="Settings">
        <VerticalTab id="profile" label="Profile" icon={<LuUser />} />
        <VerticalTab id="notifications" label="Notifications" icon={<LuBell />} />
        <VerticalTab id="security" label="Security" icon={<LuLock />} />
      </TabList>
      <TabPanel id="profile">Name, photo and contact details.</TabPanel>
      <TabPanel id="notifications">Email and push preferences.</TabPanel>
      <TabPanel id="security">Password and two-step verification.</TabPanel>
    </Tabs>
  );
}