SegmentedControl

import { Segment, SegmentedControl } from "@nexera-ui/react";

export function Options() {
  return (
    <div className="flex flex-col items-start gap-4">
      <SegmentedControl aria-label="Two options" defaultSelectedKeys={["month"]}>
        <Segment id="week" label="Week" />
        <Segment id="month" label="Month" />
      </SegmentedControl>
      <SegmentedControl aria-label="Three options" defaultSelectedKeys={["month"]}>
        <Segment id="week" label="Week" />
        <Segment id="month" label="Month" />
        <Segment id="quarter" label="Quarter" />
      </SegmentedControl>
      <SegmentedControl aria-label="Four options" defaultSelectedKeys={["month"]}>
        <Segment id="day" label="Day" />
        <Segment id="week" label="Week" />
        <Segment id="month" label="Month" />
        <Segment id="year" label="Year" />
      </SegmentedControl>
    </div>
  );
}

import { Segment, SegmentedControl } from "@nexera-ui/react";

export function ChartRange() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <h3 id="chart-range-title" className="m-0 text-heading-h4 text-primary">
        Headcount
      </h3>
      <SegmentedControl aria-labelledby="chart-range-title" defaultSelectedKeys={["6m"]}>
        <Segment id="3m" label="3M" />
        <Segment id="6m" label="6M" />
        <Segment id="12m" label="12M" />
      </SegmentedControl>
    </div>
  );
}

import { Segment, SegmentedControl } from "@nexera-ui/react";
import { LuCalendarDays, LuChartColumn, LuList } from "react-icons/lu";

export function WithIcons() {
  return (
    <div className="flex flex-col items-start gap-4">
      <SegmentedControl aria-label="Layout" defaultSelectedKeys={["list"]}>
        <Segment id="list" label="List" icon={<LuList />} />
        <Segment id="calendar" label="Calendar" icon={<LuCalendarDays />} />
        <Segment id="chart" label="Chart" icon={<LuChartColumn />} />
      </SegmentedControl>
      <SegmentedControl aria-label="Layout (compact)" defaultSelectedKeys={["list"]}>
        <Segment id="list" aria-label="List" icon={<LuList />} />
        <Segment id="calendar" aria-label="Calendar" icon={<LuCalendarDays />} />
        <Segment id="chart" aria-label="Chart" icon={<LuChartColumn />} />
      </SegmentedControl>
    </div>
  );
}

import { Segment, SegmentedControl } from "@nexera-ui/react";

export function LongLabels() {
  return (
    <div className="max-w-xs">
      <SegmentedControl aria-label="Period" defaultSelectedKeys={["month"]}>
        <Segment id="month" label="This month" />
        <Segment id="ytd" label="Year to date, including the current month" />
        <Segment id="all" label="All" />
      </SegmentedControl>
    </div>
  );
}