|
|
|
|
@ -7,7 +7,15 @@ 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"; |
|
|
|
|
import darkBlueNewspaperIcon from "../../assets/icons/dark-blue-newspaper-icon.svg"; |
|
|
|
|
|
|
|
|
|
import darkBlueCancleIcon from "../../assets/icons/dark-blue-cancle-icon.svg"; |
|
|
|
|
import lightBlueCancleIcon from "../../assets/icons/light-blue-cancle-icon.svg"; |
|
|
|
|
import lightBlueDeliveryIcon from "../../assets/icons/light-blue-delivery-icon.svg"; |
|
|
|
|
import lightGreenCancleIcon from "../../assets/icons/light-green-cancle-icon.svg"; |
|
|
|
|
import lightOrangeCancleIcon from "../../assets/icons/light-orange-cancle-icon.svg"; |
|
|
|
|
import lightPurpleCancleIcon from "../../assets/icons/light-purple-cancle-icon.svg"; |
|
|
|
|
import lightYelloCancleIcon from "../../assets/icons/light-yellow-cancle-icon.svg"; |
|
|
|
|
|
|
|
|
|
const ProductTags = ({ |
|
|
|
|
tagtitlecolor, |
|
|
|
|
@ -20,6 +28,13 @@ const ProductTags = ({ |
|
|
|
|
purpleCheckboxIcon, |
|
|
|
|
blueNewspaperIcon, |
|
|
|
|
cancleIcon, |
|
|
|
|
darkBlueIconCancle, |
|
|
|
|
lightBlueIconCancle, |
|
|
|
|
lightBlueIconDelivery, |
|
|
|
|
lightGreenIconCancle, |
|
|
|
|
lightOrangeIconCancle, |
|
|
|
|
lightPurpleIconCancle, |
|
|
|
|
lightYelloIconCancle, |
|
|
|
|
}) => { |
|
|
|
|
return ( |
|
|
|
|
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> |
|
|
|
|
@ -30,7 +45,6 @@ const ProductTags = ({ |
|
|
|
|
</div> |
|
|
|
|
{/* product UI Design */} |
|
|
|
|
<div className="flex flex-wrap items-center justify-around "> |
|
|
|
|
{/* 1 */} |
|
|
|
|
<div className="mt-2 flex flex-wrap w-1/5 "> |
|
|
|
|
<button |
|
|
|
|
className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `} |
|
|
|
|
@ -38,185 +52,8 @@ const ProductTags = ({ |
|
|
|
|
{deliveryIcon && ( |
|
|
|
|
<img src={blackDeliveryIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
)} |
|
|
|
|
{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" /> |
|
|
|
|
)} |
|
|
|
|
</button> |
|
|
|
|
<button |
|
|
|
|
className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `} |
|
|
|
|
> |
|
|
|
|
{deliveryIcon && ( |
|
|
|
|
<img src={blackDeliveryIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
)} |
|
|
|
|
{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" /> |
|
|
|
|
)} |
|
|
|
|
</button> |
|
|
|
|
<button |
|
|
|
|
className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `} |
|
|
|
|
> |
|
|
|
|
{deliveryIcon && ( |
|
|
|
|
<img src={blackDeliveryIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
)} |
|
|
|
|
{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" /> |
|
|
|
|
)} |
|
|
|
|
</button> |
|
|
|
|
<button |
|
|
|
|
className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `} |
|
|
|
|
> |
|
|
|
|
{deliveryIcon && ( |
|
|
|
|
<img src={blackDeliveryIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
)} |
|
|
|
|
{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" /> |
|
|
|
|
)} |
|
|
|
|
</button> |
|
|
|
|
<button |
|
|
|
|
className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `} |
|
|
|
|
> |
|
|
|
|
{deliveryIcon && ( |
|
|
|
|
<img src={blackDeliveryIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
)} |
|
|
|
|
{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" /> |
|
|
|
|
)} |
|
|
|
|
</button> |
|
|
|
|
<button |
|
|
|
|
className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `} |
|
|
|
|
> |
|
|
|
|
{deliveryIcon && ( |
|
|
|
|
<img src={blackDeliveryIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
)} |
|
|
|
|
{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" /> |
|
|
|
|
)} |
|
|
|
|
</button> |
|
|
|
|
<button |
|
|
|
|
className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `} |
|
|
|
|
> |
|
|
|
|
{deliveryIcon && ( |
|
|
|
|
<img src={blackDeliveryIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
{lightBlueIconCancle && ( |
|
|
|
|
<img src={lightBlueDeliveryIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
)} |
|
|
|
|
{rightIcon && ( |
|
|
|
|
<img src={blackRightIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
@ -235,41 +72,29 @@ const ProductTags = ({ |
|
|
|
|
/> |
|
|
|
|
)} |
|
|
|
|
{blueNewspaperIcon && ( |
|
|
|
|
<img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
<img src={darkBlueNewspaperIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
)} |
|
|
|
|
بسته بندی به صورت کادو |
|
|
|
|
ارسال رایگان |
|
|
|
|
{cancleIcon && ( |
|
|
|
|
<img src={blackCancleIcon} alt="" className="mr-2 w-2" /> |
|
|
|
|
)} |
|
|
|
|
</button> |
|
|
|
|
<button |
|
|
|
|
className={`product-tag-button ${tagtitlecolor} ${tagBorderColor} ${tagBgColor} `} |
|
|
|
|
> |
|
|
|
|
{deliveryIcon && ( |
|
|
|
|
<img src={blackDeliveryIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
)} |
|
|
|
|
{rightIcon && ( |
|
|
|
|
<img src={blackRightIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
{darkBlueIconCancle && ( |
|
|
|
|
<img src={darkBlueCancleIcon} alt="" className="mr-2 w-2" /> |
|
|
|
|
)} |
|
|
|
|
{darkSettingsIcon && ( |
|
|
|
|
<img src={blackSettingIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
{lightBlueIconDelivery && ( |
|
|
|
|
<img src={lightBlueCancleIcon} alt="" className="mr-2 w-2" /> |
|
|
|
|
)} |
|
|
|
|
{greenGiftIcon && ( |
|
|
|
|
<img src={lightGreenGiftIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
{lightGreenIconCancle && ( |
|
|
|
|
<img src={lightGreenCancleIcon} alt="" className="mr-2 w-2" /> |
|
|
|
|
)} |
|
|
|
|
{purpleCheckboxIcon && ( |
|
|
|
|
<img |
|
|
|
|
src={lightPurpleDoubleRightIcon} |
|
|
|
|
alt="" |
|
|
|
|
className="ml-1 w-3" |
|
|
|
|
/> |
|
|
|
|
{lightOrangeIconCancle && ( |
|
|
|
|
<img src={lightOrangeCancleIcon} alt="" className="mr-2 w-2" /> |
|
|
|
|
)} |
|
|
|
|
{blueNewspaperIcon && ( |
|
|
|
|
<img src={darkblueNewspaperIcon} alt="" className="ml-1 w-3" /> |
|
|
|
|
{lightPurpleIconCancle && ( |
|
|
|
|
<img src={lightPurpleCancleIcon} alt="" className="mr-2 w-2" /> |
|
|
|
|
)} |
|
|
|
|
آزمون |
|
|
|
|
{cancleIcon && ( |
|
|
|
|
<img src={blackCancleIcon} alt="" className="mr-2 w-2" /> |
|
|
|
|
{lightYelloIconCancle && ( |
|
|
|
|
<img src={lightYelloCancleIcon} alt="" className="mr-2 w-2" /> |
|
|
|
|
)} |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
@ -311,11 +136,18 @@ ProductTags.defaultProps = { |
|
|
|
|
tagBgColor: "bg-lightOrangeBgColor", |
|
|
|
|
tagBorderColor: "border-lightOrangeBorderColor", |
|
|
|
|
// for icons
|
|
|
|
|
deliveryIcon: true, |
|
|
|
|
deliveryIcon: false, |
|
|
|
|
rightIcon: false, |
|
|
|
|
darkSettingsIcon: false, |
|
|
|
|
greenGiftIcon: false, |
|
|
|
|
purpleCheckboxIcon: false, |
|
|
|
|
blueNewspaperIcon: false, |
|
|
|
|
cancleIcon: true, |
|
|
|
|
cancleIcon: false, |
|
|
|
|
darkBlueIconCancle: false, |
|
|
|
|
lightBlueIconCancle: false, |
|
|
|
|
lightBlueIconDelivery: false, |
|
|
|
|
lightGreenIconCancle: false, |
|
|
|
|
lightOrangeIconCancle: true, |
|
|
|
|
lightPurpleIconCancle: false, |
|
|
|
|
lightYelloIconCancle: false, |
|
|
|
|
}; |
|
|
|
|
|
