45 lines
1.9 KiB
TypeScript
45 lines
1.9 KiB
TypeScript
import clsx from "clsx";
|
|
import {ReactNode} from "react";
|
|
|
|
interface Props {
|
|
children: ReactNode;
|
|
color?: "orange" | "green" | "blue";
|
|
variant?: "outline" | "solid";
|
|
className?: string;
|
|
disabled?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export default function Button({color = "green", variant = "solid", disabled = false, className, children, onClick}: Props) {
|
|
const colorClassNames: {[key in typeof color]: {[key in typeof variant]: string}} = {
|
|
green: {
|
|
solid: "bg-mti-green-light text-white hover:bg-mti-green disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark",
|
|
outline:
|
|
"bg-transparent text-mti-green-light border border-mti-green-light hover:bg-mti-green-light disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark hover:text-white selection:text-white",
|
|
},
|
|
blue: {
|
|
solid: "bg-mti-blue-light text-white hover:bg-mti-blue disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark",
|
|
outline:
|
|
"bg-transparent text-mti-blue-light border border-mti-blue-light hover:bg-mti-blue-light disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark hover:text-white selection:text-white",
|
|
},
|
|
orange: {
|
|
solid: "bg-mti-orange-light text-white hover:bg-mti-orange disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark",
|
|
outline:
|
|
"bg-transparent text-mti-orange-light border border-mti-orange-light hover:bg-mti-orange-light disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark hover:text-white selection:text-white",
|
|
},
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={clsx(
|
|
"py-4 px-6 rounded-full transition ease-in-out duration-300 disabled:cursor-not-allowed",
|
|
className,
|
|
colorClassNames[color][variant],
|
|
)}
|
|
disabled={disabled}>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|