61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import {
|
|
backgroundColors,
|
|
textColors,
|
|
borders,
|
|
paddings,
|
|
} from "../consts/buttonStyles";
|
|
import { ButtonType } from "../types/button";
|
|
|
|
interface ButtonProps {
|
|
buttonType?: ButtonType;
|
|
icon?: React.ReactNode;
|
|
text?: string;
|
|
className?: string;
|
|
onClick?: (
|
|
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
|
|
) => void | (() => void);
|
|
disabled?: boolean;
|
|
isCircleRounded?: boolean;
|
|
type?: "button" | "submit" | "reset";
|
|
iconPos?: "right" | "left";
|
|
}
|
|
|
|
const Button = ({
|
|
className,
|
|
icon,
|
|
text,
|
|
buttonType = "primary",
|
|
disabled = false,
|
|
onClick,
|
|
type = "button",
|
|
iconPos = "left",
|
|
isCircleRounded = false,
|
|
}: ButtonProps) => {
|
|
const backgroundColor = backgroundColors[buttonType];
|
|
const textColor = textColors[buttonType];
|
|
const border = borders[buttonType];
|
|
const padding = paddings[buttonType];
|
|
const rounded = isCircleRounded ? "rounded-full" : "rounded-[8px]";
|
|
const disabledStyle = disabled ? "bg-[#0D192214] text-gray-400" : "";
|
|
|
|
return (
|
|
<button
|
|
type={type}
|
|
disabled={disabled}
|
|
onClick={onClick}
|
|
className={`zoom-280 min-w-[40px] max-h-[40px] ${rounded} ${
|
|
icon && !text ? "p-[10px] " : padding
|
|
} transition-all duration-300 ease-in-out text-[16px] pointer-events-auto flex gap-[4px] items-center align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${
|
|
className ? className : ""
|
|
}`}
|
|
>
|
|
{/* {icon && <div>{icon}</div>} */}
|
|
{icon && iconPos === "left" && <div>{icon}</div>}
|
|
{text && <div>{text}</div>}
|
|
{icon && iconPos === "right" && <div>{icon}</div>}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Button;
|