Tab

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

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

const sizes = ["sm", "md"] as const;

export function VariantsAndSizes() {
  return (
    <div className="flex flex-col gap-6">
      {variants.flatMap((variant) =>
        sizes.map((size) => (
          <Tabs key={`${variant}${size}`} defaultSelectedKey="overview">
            <TabList aria-label={`${variant} ${size}`} variant={variant}>
              <Tab id="overview" label="Overview" size={size} />
              <Tab id="documents" label="Documents" size={size} />
              <Tab id="payroll" label="Payroll" size={size} />
            </TabList>
            <TabPanel id="overview" className="sr-only">
              Overview panel
            </TabPanel>
          </Tabs>
        )),
      )}
    </div>
  );
}

import { Tab, TabList, TabPanel, Tabs } from "@nexera-ui/react";
import { LuFileText, LuLayoutDashboard, LuUsers } from "react-icons/lu";

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

export function WithIconAndCount() {
  return (
    <div className="flex flex-col gap-6">
      {variants.map((variant) => (
        <Tabs key={variant} defaultSelectedKey="dashboard">
          <TabList aria-label={`Workspace (${variant})`} variant={variant}>
            <Tab id="dashboard" label="Dashboard" icon={<LuLayoutDashboard />} />
            <Tab id="people" label="People" icon={<LuUsers />} count="24" />
            <Tab id="documents" label="Documents" icon={<LuFileText />} count="4" />
          </TabList>
          <TabPanel id="dashboard" className="sr-only">
            Dashboard panel
          </TabPanel>
        </Tabs>
      ))}
    </div>
  );
}

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

export function Disabled() {
  return (
    <Tabs defaultSelectedKey="overview">
      <TabList aria-label="Employee">
        <Tab id="overview" label="Overview" />
        <Tab id="payroll" label="Payroll" isDisabled count="2" />
        <Tab id="documents" label="Documents" />
      </TabList>
      <TabPanel id="overview" className="py-4">
        The overview panel.
      </TabPanel>
    </Tabs>
  );
}

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

export function RightToLeft() {
  return (
    <Tabs defaultSelectedKey="overview">
      <TabList aria-label="الموظف" variant="underline">
        <Tab id="overview" label="نظرة عامة" />
        <Tab id="documents" label="المستندات" count="4" />
        <Tab id="time-off" label="الإجازات" />
      </TabList>
      <TabPanel id="overview" className="py-4">
        لوحة نظرة عامة.
      </TabPanel>
    </Tabs>
  );
}