You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
import React from "react";
|
|
|
|
|
|
|
|
import arrow from "../../assets/icons/white-left-arrow.svg";
|
|
|
|
|
|
|
|
const ButtonNewDesign = ({
|
|
|
|
bgColor,
|
|
|
|
bgHoverColor,
|
|
|
|
iconBgColor,
|
|
|
|
textColor,
|
|
|
|
border,
|
|
|
|
borderColor,
|
|
|
|
borderRadius,
|
|
|
|
fontSize,
|
|
|
|
padding,
|
|
|
|
icon,
|
|
|
|
buttonIcon,
|
|
|
|
text,
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<button
|
|
|
|
className={`w-fit h-fit flex items-center transiton duration-200 hover:bg-opacity-70 ${bgColor} ${bgHoverColor} ${textColor} ${border} ${borderColor} ${borderRadius} ${fontSize} ${padding}`}
|
|
|
|
>
|
|
|
|
{text}
|
|
|
|
{icon && (
|
|
|
|
<span className={`rounded-full mr-2 ${iconBgColor} `}>
|
|
|
|
<img src={buttonIcon} alt="" className="w-full" />
|
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
</button>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ButtonNewDesign;
|
|
|
|
|
|
|
|
ButtonNewDesign.defaultProps = {
|
|
|
|
bgColor: "bg-darkGreenBg",
|
|
|
|
bgHoverColor: "hover:bg-gray-900",
|
|
|
|
iconBgColor: "bg-darkGreenBg",
|
|
|
|
textColor: "text-white",
|
|
|
|
border: "border-b-4",
|
|
|
|
borderColor: "border-lightBlueBorderColor",
|
|
|
|
borderRadius: "rounded",
|
|
|
|
fontSize: "text-sm",
|
|
|
|
padding: "p-4",
|
|
|
|
// icons
|
|
|
|
icon: true,
|
|
|
|
buttonIcon: arrow,
|
|
|
|
|
|
|
|
text: "اطلاعات بیشتر",
|
|
|
|
};
|