First commit

components/Tabs.tsx

@@ -0,0 +1,26 @@
+type TabsProps<T extends string> = {
+  options: readonly T[];
+  active: T;
+  onChange: (value: T) => void;
+};
+
+export default function Tabs<T extends string>({ options, active, onChange }: TabsProps<T>) {
+  return (
+    <div className="inline-flex flex-wrap gap-2">
+      {options.map((option) => (
+        <button
+          key={option}
+          className={`rounded-xl border px-6 py-3 text-base font-semibold transition-colors ${
+            option === active
+              ? "border-accent bg-accent text-white shadow-sm"
+              : "border-slate-300 bg-white text-slate-700 hover:border-slate-400"
+          }`}
+          onClick={() => onChange(option)}
+          type="button"
+        >
+          {option}
+        </button>
+      ))}
+    </div>
+  );
+}