← back to Open Seo

src/client/components/SegmentedToggle.tsx

36 lines

import type { ReactNode } from "react";

interface SegmentedToggleItem<T extends string> {
  value: T;
  icon: ReactNode;
  label: string;
}

export function SegmentedToggle<T extends string>({
  items,
  value,
  onChange,
  showLabels = false,
}: {
  items: SegmentedToggleItem<T>[];
  value: T;
  onChange: (value: T) => void;
  showLabels?: boolean;
}) {
  return (
    <div className="inline-flex rounded-lg bg-base-300 p-0.5">
      {items.map((item) => (
        <button
          key={item.value}
          className={`btn btn-xs gap-1.5 px-2 ${value === item.value ? "bg-primary/20 text-primary shadow-sm" : "btn-ghost text-base-content/40"}`}
          onClick={() => onChange(item.value)}
          title={item.label}
        >
          {item.icon}
          {showLabels && item.label}
        </button>
      ))}
    </div>
  );
}