Segmented control

<div class="sc-ios sc-full" role="tablist" aria-label="View">
  <button class="sc-ios-btn" role="tab"
          data-state="selected" aria-selected="true">Day</button>
  <button class="sc-ios-btn" role="tab"
          data-state="default" aria-selected="false">Week</button>
  <button class="sc-ios-btn" role="tab"
          data-state="default" aria-selected="false">Month</button>
</div>

<div class="sc-android sc-full" role="tablist" aria-label="View">
  <button class="sc-android-btn" role="tab"
          data-state="selected" aria-selected="true">Details</button>
  <button class="sc-android-btn" role="tab"
          data-state="default" aria-selected="false">Contacts</button>
  <button class="sc-android-btn" role="tab"
          data-state="default" aria-selected="false">Settings</button>
</div>

import { useId, useState, KeyboardEvent } from "react";

type System = "ios" | "android";
type Width  = "full" | "fluid";

export interface Segment {
  id: string;
  label: string;
  icon?: React.ReactNode;
  disabled?: boolean;
}

export interface SegmentedControlProps {
  system?: System;          // "ios" | "android"
  width?: Width;            // "full" | "fluid"  (iOS only)
  segments: Segment[];
  value: string;            // id of the active segment
  onChange(id: string): void;
  iconOnly?: boolean;       // drops labels, requires aria-label per segment
  ariaLabel: string;
}

export function SegmentedControl({
  system = "ios",
  width = "full",
  segments,
  value,
  onChange,
  iconOnly = false,
  ariaLabel,
}: SegmentedControlProps) {
  const trackClass = system === "ios"
    ? `sc-ios ${width === "full" ? "sc-full" : "sc-fluid"}`
    : "sc-android sc-full";

  const btnClass = system === "ios" ? "sc-ios-btn" : "sc-android-btn";

  function onKey(e: KeyboardEvent<HTMLDivElement>) {
    const idx = segments.findIndex(s => s.id === value);
    if (e.key === "ArrowRight") onChange(segments[(idx + 1) % segments.length].id);
    if (e.key === "ArrowLeft")  onChange(segments[(idx - 1 + segments.length) % segments.length].id);
  }

  return (
    <div className={trackClass} role="tablist"
         aria-label={ariaLabel} onKeyDown={onKey}>
      {segments.map(seg => {
        const selected = seg.id === value;
        return (
          <button
            key={seg.id}
            role="tab"
            type="button"
            className={btnClass}
            data-state={seg.disabled ? "disabled" : selected ? "selected" : "default"}
            aria-selected={selected}
            aria-label={iconOnly ? seg.label : undefined}
            tabIndex={selected ? 0 : -1}
            disabled={seg.disabled}
            onClick={() => !seg.disabled && onChange(seg.id)}
          >
            {seg.icon}
            {!iconOnly && <span>{seg.label}</span>}
          </button>
        );
      })}
    </div>
  );
}

import { useState } from "react";
import { SegmentedControl } from "./SegmentedControl";
import { isAndroid } from "./platform";

export function TimeRangeFilter() {
  const [range, setRange] = useState("day");

  return (
    <SegmentedControl
      system={isAndroid() ? "android" : "ios"}
      ariaLabel="Time range"
      value={range}
      onChange={setRange}
      segments={[
        { id: "day",   label: "Day" },
        { id: "week",  label: "Week" },
        { id: "month", label: "Month" },
      ]}
    />
  );
}