TextToggleButton TextToggleButton.tsx

0% Statements 0/3

0% Branches 0/2

0% Functions 0/2

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
37
38
39
40
41
42
43  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { ReactElement } from "react";
 
import { IUseToggleHandlers } from "hooks/useToggle";
 
interface ITextToggleButtonProps {
  isToggle: boolean;
  toggleHandlers: IUseToggleHandlers;
  activeText: string;
  inactiveText: string;
}
 
export default function TextToggleButton({
  isToggle,
  toggleHandlers,
  activeText,
  inactiveText,
}: ITextToggleButtonProps): ReactElement {
  return (
    <button
      type="button"
      onClick={(e) => {
        e.stopPropagation();
        toggleHandlers.toggle();
      }}
    >
      {isToggle ? activeText : inactiveText}
      <style jsx>{`
        button {
          background: none;
          border: none;
          color: rgba(255, 255, 255, 0.7);
          margin: 18px 0;
          font-weight: bold;
        }
        button:hover,
        button:focus {
          color: white;
        }
      `}</style>
    </button>
  );
}