2021-05-27 01:07:54 +00:00
|
|
|
import React from "react";
|
|
|
|
import "./Button.css";
|
|
|
|
import { Link } from "react-router-dom";
|
2021-05-25 21:40:27 +00:00
|
|
|
|
2021-05-27 01:07:54 +00:00
|
|
|
const STYLES = ["btn--primary", "btn--outline"];
|
2021-05-25 21:40:27 +00:00
|
|
|
|
2021-05-27 01:07:54 +00:00
|
|
|
const SIZES = ["btn--medium", "btn--large"];
|
2021-05-25 21:40:27 +00:00
|
|
|
export const Button = ({
|
2021-05-27 01:07:54 +00:00
|
|
|
children,
|
|
|
|
type,
|
|
|
|
onClick,
|
|
|
|
buttonStyle,
|
|
|
|
buttonSize,
|
2021-06-21 00:11:44 +00:00
|
|
|
newTo,
|
2021-05-25 21:40:27 +00:00
|
|
|
}) => {
|
2021-05-27 01:07:54 +00:00
|
|
|
const checkButtonStyle = STYLES.includes(buttonStyle)
|
|
|
|
? buttonStyle
|
|
|
|
: STYLES[0];
|
2021-05-25 21:40:27 +00:00
|
|
|
|
2021-05-27 01:07:54 +00:00
|
|
|
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
|
|
|
|
|
|
|
|
return (
|
2021-06-21 01:45:22 +00:00
|
|
|
<Link to={newTo || "/"} className="btn-mobile">
|
2021-05-27 01:07:54 +00:00
|
|
|
<button
|
|
|
|
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
|
|
|
|
onClick={onClick}
|
|
|
|
type={type}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</button>
|
|
|
|
</Link>
|
|
|
|
);
|
|
|
|
};
|