ui Tabs.tsx

0% Statements 0/3

0% Branches 0/2

0% Functions 0/3

0% Lines 0/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  interface Tab {
  key: string;
  label: string;
}
 
interface TabsProps {
  tabs: Tab[];
  activeTab: string;
  onChange: (key: string) => void;
}
 
function Tabs({ tabs, activeTab, onChange }: TabsProps) {
  return (
    <div className="inline-flex gap-1 bg-surface-secondary rounded-button p-1">
      {tabs.map(tab => (
        <button
          key={tab.key}
          onClick={() => onChange(tab.key)}
          className={`
            rounded-button transition-button
            ${tab.key === activeTab
              ? 'bg-white text-text-primary shadow-subtle px-4 py-2 text-sm font-semibold'
              : 'text-text-secondary hover:text-text-primary px-4 py-2 text-sm font-medium'
            }
          `}
        >
          {tab.label}
        </button>
      ))}
    </div>
  );
}
 
export { Tabs };
export type { Tab };