88 lines
1.8 KiB
TypeScript
88 lines
1.8 KiB
TypeScript
import React, { FC, ReactNode } from "react";
|
|
import styled, { css } from "styled-components";
|
|
import CSS from "csstype";
|
|
import { darken, lighten } from "polished";
|
|
|
|
import { borderRadius, color, typography } from "../shared/styles";
|
|
|
|
export interface ButtonProps {
|
|
children: ReactNode | null;
|
|
style?: CSS.Properties;
|
|
variant?: "primary" | "secondary";
|
|
boldFont?: boolean;
|
|
wide?: boolean;
|
|
onClick: () => void;
|
|
}
|
|
|
|
const Button: FC<ButtonProps> = ({
|
|
children,
|
|
style,
|
|
variant = "primary",
|
|
boldFont = false,
|
|
wide = false,
|
|
onClick,
|
|
}) => {
|
|
return (
|
|
<StyledButton
|
|
variant={variant}
|
|
boldFont={boldFont}
|
|
wide={wide}
|
|
style={style}
|
|
onClick={onClick}
|
|
>
|
|
{children}
|
|
</StyledButton>
|
|
);
|
|
};
|
|
|
|
export { Button };
|
|
|
|
const StyledButton = styled.button<ButtonProps>`
|
|
border: 0;
|
|
border-radius: ${borderRadius.large};
|
|
cursor: pointer;
|
|
|
|
padding: 1rem 3rem;
|
|
height: 5rem;
|
|
min-width: ${(props) => (props.wide ? "18rem" : "8rem")};
|
|
|
|
font-size: ${typography.size.small};
|
|
font-family: ${typography.family.primary};
|
|
font-weight: ${(props) =>
|
|
props.boldFont ? typography.weight.bold : typography.weight.heavy};
|
|
|
|
transition: all 150ms ease-out;
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
${(props) =>
|
|
props.variant === "primary" &&
|
|
css`
|
|
color: ${color.white};
|
|
background-color: ${color.primary};
|
|
|
|
&:hover {
|
|
background-color: ${darken(0.05, color.primary)};
|
|
}
|
|
`}
|
|
|
|
${(props) =>
|
|
props.variant === "secondary" &&
|
|
css`
|
|
color: ${color.darkblue};
|
|
background-color: ${color.secondary};
|
|
|
|
&:hover {
|
|
background-color: ${lighten(0.1, color.secondary)};
|
|
}
|
|
`}
|
|
`;
|