43 lines
989 B
TypeScript
43 lines
989 B
TypeScript
import {
|
|
backgroundColors,
|
|
backgroundHoverColors,
|
|
textColors,
|
|
} from "../consts/buttonColors";
|
|
import { ButtonType } from "../types/button";
|
|
|
|
interface ButtonProps {
|
|
buttonType?: ButtonType;
|
|
icon?: React.ReactNode;
|
|
text?: string;
|
|
className?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const Button = ({
|
|
className,
|
|
icon,
|
|
text,
|
|
buttonType = "primary",
|
|
onClick,
|
|
}: ButtonProps) => {
|
|
const backgroundColor = backgroundColors[buttonType];
|
|
const backgroundHoverColor = backgroundHoverColors[buttonType];
|
|
const textColor = textColors[buttonType];
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={`min-w-[40px] ${
|
|
icon && !text ? "p-[10px]" : "py-3 px-6"
|
|
} transition-[background] duration-300 ease-in-out rounded-lg text-s ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
|
|
className ? className : ""
|
|
}`}
|
|
>
|
|
{icon && <div>{icon}</div>}
|
|
{text && <p>{text}</p>}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Button;
|