webapp

1
// import React from 'react';
2
// import './Button.css';
3
// import { Link } from 'react-router-dom';
4

5
// export function Button() {
6
//   return (
7
//     <Link to='sign-up'>
8
//       <button className='btn'>Sign Up</button>
9
//     </Link>
10
//   );
11
// }
12

13
import React from 'react';
14
import './Button.css';
15
import { Link } from 'react-router-dom';
16

17
const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];
18

19
const SIZES = ['btn--medium', 'btn--large'];
20

21
export const Button = ({
22
  children,
23
  type,
24
  onClick,
25
  buttonStyle,
26
  buttonSize
27
}) => {
28
  const checkButtonStyle = STYLES.includes(buttonStyle)
29
    ? buttonStyle
30
    : STYLES[0];
31

32
  const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
33

34
  return (
35
    <Link to='/sign-up' className='btn-mobile'>
36
      <button
37
        className={`btn ${checkButtonStyle} ${checkButtonSize}`}
38
        onClick={onClick}
39
        type={type}
40
      >
41
        {children}
42
      </button>
43
    </Link>
44
  );
45
};
46