35 lines
969 B
TypeScript
35 lines
969 B
TypeScript
import { FunctionComponent } from "preact";
|
|
import { tv } from "tailwind-variants";
|
|
import classes from "./Button.module.scss";
|
|
const button = tv({
|
|
base: classes.button,
|
|
variants: {
|
|
color: {
|
|
primary: "bg-[rgba(206,232,251,0.7)] hover:bg-[rgba(206,232,251,0.9)] active:bg-[rgba(206,232,251,0.9)]",
|
|
secondary: "bg-[rgba(255,251,197,0.68)] hover:bg-[rgba(255,251,197,0.9)] active:bg-[rgba(255,251,197,0.9)]",
|
|
red: "bg-[rgba(251,194,199,0.53)] hover:bg-[rgba(251,194,199,0.9)] active:bg-[rgba(251,194,199,0.9)]",
|
|
},
|
|
},
|
|
});
|
|
|
|
interface ButtonProps {
|
|
color?: "primary" | "secondary" | "red";
|
|
onClick?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
const Button: FunctionComponent<ButtonProps> = ({
|
|
children,
|
|
onClick = () => {},
|
|
color = "primary",
|
|
className = "",
|
|
}) => {
|
|
return (
|
|
<button type="button" class={button({ color: color, class: className })} onClick={onClick}>
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Button;
|