|
|
|
|
@ -4,6 +4,10 @@ import "./ProductTags.scss"; |
|
|
|
|
import blackCancleIcon from "../../assets/icons/black-cancle-icon.svg"; |
|
|
|
|
import blackDeliveryIcon from "../../assets/icons/black-delivery-icon.svg"; |
|
|
|
|
import blackRightIcon from "../../assets/icons/black-right-icon.svg"; |
|
|
|
|
import blackSettingIcon from "../../assets/icons/black-settings-icon.svg"; |
|
|
|
|
import lightGreenGiftIcon from "../../assets/icons/light-green-gift-icon.svg"; |
|
|
|
|
import lightPurpleDoubleRightIcon from "../../assets/icons/light-purple-double-right-icon.svg"; |
|
|
|
|
import darkblueNewspaperIcon from "../../assets/icons/dark-blue-newspaper-icon.svg"; |
|
|
|
|
|
|
|
|
|
const ProductTags = ({ |
|
|
|
|
tagtitlecolor, |
|
|
|
|
@ -11,6 +15,10 @@ const ProductTags = ({ |
|
|
|
|
tagBorderColor, |
|
|
|
|
deliveryIcon, |
|
|
|
|
rightIcon, |
|
|
|
|
darkSettingsIcon, |
|
|
|
|
greenGiftIcon, |
|
|
|
|
purpleCheckboxIcon, |
|
|
|
|
blueNewspaperIcon, |
|
|
|
|
cancleIcon, |
|
|
|
|
}) => { |
|
|
|
|
return ( |
|
|
|
|
@ -33,6 +41,22 @@ const ProductTags = ({ |
|
|
|
|
{rightIcon && ( |
|
|
|
|
<img src={blackRightIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
)} |
|
|
|
|
{darkSettingsIcon && ( |
|
|
|
|
<img src={blackSettingIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
)} |
|
|
|
|
{greenGiftIcon && ( |
|
|
|
|
<img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
)} |
|
|
|
|
{purpleCheckboxIcon && ( |
|
|
|
|
<img |
|
|
|
|
src={lightPurpleDoubleRightIcon} |
|
|
|
|
alt="" |
|
|
|
|
className="ml-1 w-3" |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
{blueNewspaperIcon && ( |
|
|
|
|
<img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
)} |
|
|
|
|
ارسال رایگان |
|
|
|
|
{cancleIcon && ( |
|
|
|
|
<img src={blackCancleIcon} alt="" className="mr-2 w-2" /> |
|
|
|
|
@ -47,37 +71,41 @@ const ProductTags = ({ |
|
|
|
|
export default ProductTags; |
|
|
|
|
|
|
|
|
|
// color classes that i defined in tailwind.config.js and we can use for text color:
|
|
|
|
|
// 1 ----> text-lightBlueTextColor
|
|
|
|
|
// 2 ----> text-grayTextColor
|
|
|
|
|
// 3 ----> text-lightOrangeTextColor
|
|
|
|
|
// 4 ----> text-lightYellowTextColor
|
|
|
|
|
// 4 ----> text-lightGreenTextColor
|
|
|
|
|
// 4 ----> text-lightPurpleTextColor
|
|
|
|
|
// 5 ----> text-darkBlueTextColor
|
|
|
|
|
// ----> text-grayTextColor
|
|
|
|
|
// ----> text-lightBlueTextColor
|
|
|
|
|
// ----> text-lightOrangeTextColor
|
|
|
|
|
// ----> text-lightYellowTextColor
|
|
|
|
|
// ----> text-lightGreenTextColor
|
|
|
|
|
// ----> text-lightPurpleTextColor
|
|
|
|
|
// ----> text-darkBlueTextColor
|
|
|
|
|
|
|
|
|
|
// color classes that i defined in tailwind.config.js and we can use for background color:
|
|
|
|
|
// 1 ----> bg-productTagBg
|
|
|
|
|
// 2 ----> bg-lightOrangeBgColor
|
|
|
|
|
// 3 ----> bg-lightYellowBgColor
|
|
|
|
|
// 4 ----> bg-lightBlueBgColor
|
|
|
|
|
// 4 ----> bg-lightGreenBgColor
|
|
|
|
|
// 4 ----> bg-lightPurpleBgColor
|
|
|
|
|
// ----> bg-productTagBg
|
|
|
|
|
// ----> bg-lightOrangeBgColor
|
|
|
|
|
// ----> bg-lightYellowBgColor
|
|
|
|
|
// ----> bg-lightBlueBgColor
|
|
|
|
|
// ----> bg-lightGreenBgColor
|
|
|
|
|
// ----> bg-lightPurpleBgColor
|
|
|
|
|
|
|
|
|
|
// color classes that i defined in tailwind.config.js and we can use for border color:
|
|
|
|
|
// 1 ----> border-lightBlueBorderColor
|
|
|
|
|
// 2 ----> border-grayBorderColor
|
|
|
|
|
// 3 ----> border-lightOrangeBorderColor
|
|
|
|
|
// 4 ----> border-lightYellowBorderColor
|
|
|
|
|
// 5 ----> border-lightGreenBorderColor
|
|
|
|
|
// 5 ----> border-lightPurpleBorderColor
|
|
|
|
|
// 6 ----> border-darkBlueBorderColor
|
|
|
|
|
// ----> border-lightBlueBorderColor
|
|
|
|
|
// ----> border-grayBorderColor
|
|
|
|
|
// ----> border-lightOrangeBorderColor
|
|
|
|
|
// ----> border-lightYellowBorderColor
|
|
|
|
|
// ----> border-lightGreenBorderColor
|
|
|
|
|
// ----> border-lightPurpleBorderColor
|
|
|
|
|
// ----> border-darkBlueBorderColor
|
|
|
|
|
|
|
|
|
|
ProductTags.defaultProps = { |
|
|
|
|
tagtitlecolor: "text-lightPurpleTextColor", |
|
|
|
|
tagBgColor: "bg-lightPurpleBgColor", |
|
|
|
|
tagBorderColor: "border-lightPurpleBorderColor", |
|
|
|
|
tagtitlecolor: "text-grayTextColor", |
|
|
|
|
tagBgColor: "bg-productTagBg", |
|
|
|
|
tagBorderColor: "border-grayBorderColor", |
|
|
|
|
// for icons
|
|
|
|
|
deliveryIcon: true, |
|
|
|
|
deliveryIcon: false, |
|
|
|
|
rightIcon: false, |
|
|
|
|
darkSettingsIcon: false, |
|
|
|
|
greenGiftIcon: false, |
|
|
|
|
purpleCheckboxIcon: false, |
|
|
|
|
blueNewspaperIcon: true, |
|
|
|
|
cancleIcon: true, |
|
|
|
|
}; |
|
|
|
|
|
