agent-platform/web/src/components/ui/tabs.tsx

import * as React from "react";
import { cn } from "@/lib/utils";

export function Tabs({
  tabs,
  value,
  onChange,
}: {
  tabs: Array<{ value: string; label: string; content: React.ReactNode }>;
  value: string;
  onChange: (value: string) => void;
}) {
  const active = tabs.find((tab) => tab.value === value) ?? tabs[0];
  return (
    <div>
      <div className="flex rounded-md border border-border bg-muted/40 p-1">
        {tabs.map((tab) => (
          <button
            key={tab.value}
            className={cn(
              "flex-1 rounded-sm px-3 py-1.5 text-sm text-muted-foreground transition",
              value === tab.value && "bg-muted text-foreground",
            )}
            onClick={() => onChange(tab.value)}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <div className="mt-4">{active?.content}</div>
    </div>
  );
}