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.
56 lines
1.2 KiB
56 lines
1.2 KiB
import React from "react"; |
|
|
|
import arrow from "../../assets/icons/white-left-arrow.svg"; |
|
|
|
const ButtonNewDesign = ({ |
|
bgColor, |
|
bgHoverColor, |
|
iconBgColor, |
|
textColor, |
|
border, |
|
borderColor, |
|
borderRadius, |
|
fontSize, |
|
paddingX, |
|
paddingY, |
|
icon, |
|
buttonIcon, |
|
text, |
|
onClick, |
|
iconMarginRight, |
|
}) => { |
|
return ( |
|
<button |
|
onClick={onClick} |
|
className={`w-fit h-fit flex items-center transiton duration-200 hover:bg-opacity-70 ${bgColor} ${bgHoverColor} ${textColor} ${border} ${borderColor} ${borderRadius} ${fontSize} |
|
${paddingY} ${paddingX}`} |
|
> |
|
{text} |
|
{icon && ( |
|
<span className={`rounded-full ${iconMarginRight} ${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", |
|
paddingX: "p-4", |
|
paddingY: "p-4", |
|
// icons |
|
icon: true, |
|
buttonIcon: arrow, |
|
iconMarginRight: "mr-2", |
|
text: "اطلاعات بیشتر", |
|
};
|
|
|