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>
);
};