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