32 lines
969 B
JavaScript
32 lines
969 B
JavaScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import {Medium} from "../../utils/fonts";
|
|
|
|
const ButtonStyle = styled(Medium)`
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: ${({width}) => width ? width : '64px'};
|
|
height: ${({height}) => height ? height : '28px'};
|
|
border-radius: 12px;
|
|
background-color: ${({theme, backgroundColor}) => backgroundColor ? backgroundColor : theme.colors.green};
|
|
color: ${({theme, color}) => color ? color : theme.colors.white};
|
|
box-shadow: ${({theme}) => theme.buttonShadow};
|
|
cursor: pointer;
|
|
transition: transform 0.3s ease-in-out;
|
|
|
|
&:hover {
|
|
transform: scale(1.15);
|
|
}
|
|
`;
|
|
|
|
const Button = (props) => {
|
|
return (
|
|
<ButtonStyle onClick={props.handler} width={props.width} height={props.height}
|
|
color={props.color} backgroundColor={props.backgroundColor}>
|
|
{props.children}
|
|
</ButtonStyle>
|
|
);
|
|
}
|
|
|
|
export default Button; |