49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import type { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler } from "react";
|
|
import clsx from "clsx";
|
|
|
|
type Props = {
|
|
variant: Variant;
|
|
onClick?: MouseEventHandler;
|
|
isDisabled?: boolean;
|
|
type: ButtonHTMLAttributes<HTMLButtonElement>["type"];
|
|
};
|
|
|
|
const Button: FunctionComponent<Props> = ({ children, type, variant, onClick, isDisabled }) => {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
type={type}
|
|
className={clsx(
|
|
"inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2",
|
|
{
|
|
[VARIANTS_STYLES[variant].base]: !isDisabled,
|
|
[VARIANTS_STYLES[variant].disabled]: isDisabled,
|
|
},
|
|
)}
|
|
disabled={isDisabled}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Button;
|
|
|
|
type Variant = "error" | "default";
|
|
|
|
type VariantStyle = {
|
|
base: string;
|
|
disabled: string;
|
|
};
|
|
|
|
const VARIANTS_STYLES: Record<Variant, VariantStyle> = {
|
|
error: {
|
|
base: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
|
|
disabled: "bg-red-400 cursor-not-allowed focus:ring-red-500",
|
|
},
|
|
default: {
|
|
base: "bg-primary-600 hover:bg-primary-700 focus:ring-primary-500",
|
|
disabled: "bg-primary-400 cursor-not-allowed focus:ring-primary-500",
|
|
},
|
|
};
|