1  import { useState } from 'react';
 2  
 3  /**
 4   * Simple tab bar.
 5   * tabs: [{ id, label }]
 6   * children: React node (receives activeTab via render prop or just render all and hide)
 7   *
 8   * Usage:
 9   *   <Tabs tabs={[{id:'a',label:'A'},{id:'b',label:'B'}]}>
10   *     {(active) => active === 'a' ? <A/> : <B/>}
11   *   </Tabs>
12   */
13  export default function Tabs({ tabs, children, defaultTab }) {
14    const [active, setActive] = useState(defaultTab ?? tabs[0]?.id);
15    return (
16      <div>
17        <div className="flex gap-1 border-b border-slate-700 mb-6">
18          {tabs.map(t => (
19            <button
20              key={t.id}
21              onClick={() => setActive(t.id)}
22              className={`px-4 py-2 text-sm font-medium rounded-t-md transition-colors ${
23                active === t.id
24                  ? 'border-b-2 border-sky-400 text-sky-400'
25                  : 'text-slate-400 hover:text-slate-200'
26              }`}
27            >
28              {t.label}
29            </button>
30          ))}
31        </div>
32        {typeof children === 'function' ? children(active) : children}
33      </div>
34    );
35  }