common Tab.tsx

100% Statements 25/25

100% Branches 3/3

100% Functions 1/1

100% Lines 25/25

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
37
38
39
40
41
42
43
44
45
46
47  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
5x
5x
5x
5x
5x
5x
5x
5x
5x
5x
5x
5x
5x
 
5x
1x
4x
5x
5x
5x
 
5x
5x
5x
 
5x
 
1x
  import React, { ReactNode } from "react";
 
export interface TabProps {
  id: string;
  label: string;
  active?: boolean;
  onClick?: () => void;
  className?: string;
  children?: ReactNode;
}
 
/**
 * Tab component for tab navigation in the application
 *
 * ## Business Perspective
 * Provides standard UI elements for navigating between different views within a section. 📑
 */
const Tab: React.FC<TabProps> = ({
  id,
  label,
  active = false,
  onClick,
  className = "",
  children,
}) => {
  return (
    <button
      role="tab"
      id={id}
      aria-selected={active}
      className={`px-4 py-2 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 
        ${
          active
            ? "bg-primary-50 text-primary-700"
            : "text-gray-600 hover:text-gray-800 hover:bg-gray-100"
        } 
        ${className}`}
      onClick={onClick}
    >
      {label}
      {children}
    </button>
  );
};
 
export default Tab;