33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
import { ReactNode } from "react";
|
|
|
|
export const Button: React.FC<{
|
|
onClick: () => void;
|
|
variant?: "cancel" | "primary" | "secondary" | "danger" | "none";
|
|
className?: string;
|
|
disabled?: boolean;
|
|
children: ReactNode;
|
|
}> = ({ onClick, children, className, disabled, variant }) => {
|
|
let variantClassNames = {
|
|
secondary:
|
|
"hover:bg-blue-500 transition-colors hover:text-white dark:hover:bg-blue-900/50",
|
|
danger:
|
|
"bg-red-400 text-white border-green-50 hover:border-red-700 hover:bg-red-600 dark:bg-red-800 dark:border-none dark:hover:bg-red-900",
|
|
primary:
|
|
"bg-blue-600 text-white hover:bg-blue-800 disabled:bg-blue-200 dark:disabled:bg-slate-600 dark:disabled:text-slate-300 dark:border-none",
|
|
cancel:
|
|
"hover:bg-slate-200 dark:bg-slate-600 dark:hover:bg-slate-700 dark:border-none",
|
|
none: "",
|
|
}[variant ?? "secondary"];
|
|
return (
|
|
<button
|
|
disabled={disabled}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
onClick();
|
|
}}
|
|
className={`inline-flex items-center gap-1 border rounded-lg disabled:cursor-not-allowed px-2 py-1 dark:border-slate-700 ${variantClassNames} ${className}`}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|