45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { css } from "@/styled-system/css";
|
|
import { ComponentChild, ComponentProps } from "preact";
|
|
|
|
type ButtonProps = ComponentProps<"button"> & {
|
|
children: ComponentChild;
|
|
onClick?: (event: MouseEvent) => void;
|
|
type?: "button" | "submit" | "reset";
|
|
}
|
|
|
|
export default function Button({ children, type, onClick, ...props }: ButtonProps) {
|
|
return (
|
|
<button
|
|
className={css({
|
|
backgroundColor: "blue.100",
|
|
color: "blue.800",
|
|
border: "1px solid",
|
|
borderColor: "blue.800",
|
|
cursor: "pointer",
|
|
transition: "all 0.2s",
|
|
boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.05)",
|
|
p: 4,
|
|
rounded: "lg",
|
|
_hover: {
|
|
backgroundColor: "blue.200",
|
|
borderColor: "blue.200",
|
|
boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)",
|
|
},
|
|
_active: {
|
|
backgroundColor: "blue.300",
|
|
},
|
|
_focus: {
|
|
boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(0, 0, 255, 0.2)",
|
|
outline: "none",
|
|
inset: "0 0 0 3px rgba(0, 0, 255, 0.2)",
|
|
}
|
|
})}
|
|
type={type ?? "button"}
|
|
onClick={onClick}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|