shared Tabs.tsx

100% Statements 4/4

100% Branches 2/2

100% Functions 3/3

100% Lines 4/4

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  
 
 
 
 
 
3x
7x
 
 
 
 
 
23x
 
 
2x
 
 
 
 
 
 
 
 
  import { Box } from '@metamask/design-system-react';
 
export const Tabs: React.FC<{
  tabs: { label: string; value: string }[];
  activeTab: string;
  onTabChange: (tab: string) => void;
}> = ({ tabs, activeTab, onTabChange }) => {
  return (
    <Box
      className="flex overflow-hidden w-max w-full justify-start border-b border-muted mb-6"
      role="tablist"
    >
      {tabs.map((tab) => (
        <button
          className={`p-2 mx-2 font-medium border-b-2 focus:outline-none focus:ring-0 text-s-body-sm font-default select-none ${activeTab === tab.value ? 'text-primary-default border-primary-default' : 'border-transparent text-default hover:text-alternative'} `}
          role="tab"
          onClick={() => onTabChange(tab.value)}
          key={tab.value}
        >
          {tab.label}
        </button>
      ))}
    </Box>
  );
};