Aarni Halinen
72 lines
1.5 KiB
TypeScript
72 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { colors } from "@theme/colors";
|
|
|
|
interface ButtonProps {
|
|
onClick: () => void;
|
|
buttonStyle: "hero" | "filled" | "filter" | "bordered";
|
|
selected?: boolean;
|
|
}
|
|
|
|
const StyledButton = styled.button<{ $selected: boolean }>`
|
|
border-radius: none;
|
|
padding: 0.8rem 2rem;
|
|
margin: 0.5rem;
|
|
font-size: 0.8rem;
|
|
background: none;
|
|
text-transform: uppercase;
|
|
|
|
&.hero {
|
|
background-color: ${colors.darkBlue};
|
|
color: ${colors.blue1};
|
|
font-weight: 800;
|
|
letter-spacing: 1.5px;
|
|
border: 1px solid ${colors.lightTurquoise};
|
|
}
|
|
|
|
&.filled {
|
|
justify-content: center;
|
|
background-color: ${colors.blue1};
|
|
color: ${colors.white};
|
|
font-weight: 800;
|
|
letter-spacing: 1.5px;
|
|
border: none;
|
|
}
|
|
|
|
&.bordered {
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
color: ${colors.blue1};
|
|
border: 1px solid ${colors.blue1};
|
|
}
|
|
|
|
&.filter {
|
|
text-transform: none;
|
|
color: ${colors.grey1};
|
|
font-weight: 300;
|
|
border: 2px solid ${colors.grey1};
|
|
|
|
${(p) => p.$selected && (`
|
|
background-color: ${colors.grey1};
|
|
color: ${colors.white};
|
|
`)}
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
`;
|
|
|
|
const Button: React.FC<ButtonProps> = ({
|
|
buttonStyle, selected, onClick, ...props
|
|
}) => (
|
|
<StyledButton type="button" onClick={onClick} className={buttonStyle} $selected={selected} {...props} />
|
|
);
|
|
|
|
export default Button;
|