TabsComponent index.tsx

0% Statements 0/4

0% Branches 0/6

0% Functions 0/3

0% Lines 0/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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  function TabsComponent({ options, handleSelect, selectedId, ...props }) {
  return (
    <div className="flex items-center mt-2 overflow-hidden w-fit">
      {options.map((option, index) => (
        <button
          key={option.id}
          onClick={(e) => handleSelect(e, option)}
          className={`${
            selectedId === option.id
              ? "!bg-white !text-violet-500 border-violet-500"
              : "text-gray-500 bg-gray-50 border-gray-200"
          } ${index === options.length - 1 ? "rounded-r" : ""} ${
            index === 0 ? "rounded-l" : ""
          } p-1 text-xs hover:bg-gray-100 cursor-pointer transition-all border`}
          {...props}>
          {option.label}
        </button>
      ))}
    </div>
  );
}
 
export default TabsComponent;