feat(buyer-tasks): tab strip component

Co-authored-by: Orca <help@stably.ai>

src/components/buyer-tasks/buyer-task-tabs.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+export type BuyerTaskTab = "needs_po" | "po_draft" | "po_sent";
+
+const TABS: Array<{ value: BuyerTaskTab; label: string }> = [
+  { value: "needs_po", label: "Needs PO" },
+  { value: "po_draft", label: "PO Draft" },
+  { value: "po_sent", label: "PO Sent" },
+];
+
+export function BuyerTaskTabs({
+  active,
+  counts,
+  onChange,
+}: {
+  active: BuyerTaskTab;
+  counts: Record<BuyerTaskTab, number>;
+  onChange: (tab: BuyerTaskTab) => void;
+}) {
+  return (
+    <div className="flex border-b" role="tablist" aria-label="Buyer task tabs">
+      {TABS.map((tab) => (
+        <button
+          key={tab.value}
+          type="button"
+          role="tab"
+          aria-selected={active === tab.value}
+          onClick={() => onChange(tab.value)}
+          data-testid={`buyer-task-tab-${tab.value}`}
+          className={cn(
+            "px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
+            active === tab.value
+              ? "border-primary text-foreground"
+              : "border-transparent text-muted-foreground hover:text-foreground"
+          )}
+        >
+          {tab.label}
+          <span className="ml-2 text-xs text-muted-foreground">
+            ({counts[tab.value]})
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}