45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { ReactNode, MouseEventHandler } from "react";
|
|
import styles from "./button.module.css";
|
|
|
|
type ButtonVariant = "primary" | "danger" | "transparent" | "default";
|
|
|
|
interface ButtonProps {
|
|
children: ReactNode;
|
|
variant?: ButtonVariant;
|
|
onClick?: MouseEventHandler<HTMLDivElement>;
|
|
className?: string | undefined;
|
|
}
|
|
|
|
const Button = ({
|
|
children,
|
|
variant = "primary",
|
|
onClick,
|
|
className = "",
|
|
}: ButtonProps) => {
|
|
let btnStyle: string;
|
|
|
|
if (variant === "primary") { // @ts-ignore
|
|
btnStyle = styles.primary;
|
|
}
|
|
else if (variant === "danger") { // @ts-ignore
|
|
btnStyle = styles.danger;
|
|
}
|
|
else if (variant === "transparent") { // @ts-ignore
|
|
btnStyle = styles.transparent;
|
|
}
|
|
else { // @ts-ignore
|
|
btnStyle = styles.default;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`${styles.btn} ${btnStyle} ${className}`}
|
|
onClick={onClick}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Button;
|