shellphone.app/app/features/settings/components/button.tsx

49 lines
1.3 KiB
TypeScript
Raw Normal View History

2022-05-14 10:22:06 +00:00
import type { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, PropsWithChildren } from "react";
2021-07-31 17:22:48 +00:00
import clsx from "clsx";
type Props = {
variant: Variant;
onClick?: MouseEventHandler;
isDisabled?: boolean;
type: ButtonHTMLAttributes<HTMLButtonElement>["type"];
};
2022-05-14 10:22:06 +00:00
const Button: FunctionComponent<PropsWithChildren<Props>> = ({ children, type, variant, onClick, isDisabled }) => {
2021-07-31 17:22:48 +00:00
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,
2021-08-01 12:04:04 +00:00
},
2021-07-31 17:22:48 +00:00
)}
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",
},
};