32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import { forwardRef, HTMLProps } from "preact/compat";
|
|
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 extends HTMLProps<HTMLButtonElement> {
|
|
color?: "primary" | "secondary" | "red";
|
|
className?: string;
|
|
}
|
|
|
|
const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
|
|
const { children, onClick = () => {}, color = "primary", className = "", type = "button" } = props;
|
|
return (
|
|
<button ref={ref} type={type} class={button({ color: color, class: className })} onClick={onClick}>
|
|
{children}
|
|
</button>
|
|
);
|
|
});
|
|
|
|
Button.displayName = "AHButton";
|
|
|
|
export default Button;
|