mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

button design updated

Browse Source
master
mahdi 3 years ago
parent c6f02a59f8
commit 72111f6451
4 changed files with 134 additions and 813 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 199
      src/components/buttonDesign/ButtonDesign.js
  2. 3
      src/components/buttonDesign/ButtonDesign.scss
  3. 735
      src/components/productTags/ProductTags.js
  4. 10
      tailwind.config.js

199
src/components/buttonDesign/ButtonDesign.js
Unescape View File

@ -13,7 +13,30 @@ import blackLeftArrow from "../../assets/icons/black-left-arrow.svg";
import blackUpwardArrow from "../../assets/icons/black-upward-arrow.png";
import blackDownwardArrow from "../../assets/icons/black-downward-arrow.png";
const ButtonDesign = () => {
const ButtonDesign = ({
buttonBgColor,
circleArrowBgClr,
buttonTextColor,
buttonBorder,
buttonBorderColor,
buttonBorderRadius,
buttonPaddingX,
buttonPaddingY,
imageMarginRight,
imageWidth,
imageHeight,
// icons
leftArrowWhite,
rightArrowWhite,
upwardArrowWhite,
downwardArrowWhite,
leftArrowBlack,
rightArrowBlack,
upwardArrowBlack,
downwardArrowBlack,
circleArrow,
}) => {
return (
<div>
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -32,82 +55,71 @@ const ButtonDesign = () => {
{/* Button UI Design */}
<div className="flex flex-wrap justify-around items-center">
<div>
<button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-lightBlueBorderColor my-2 ">
اطلاعات بیشتر
</button>
<br />
<button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
اطلاعات بیشتر
</button>
<br />
<button className="bg-darkGreenBg text-white text-sm md:text-base rounded-full px-6 py-2 my-2">
اطلاعات بیشتر
</button>
<br />
<button className="bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 border-b-4 border-lightBlueBorderColor my-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300">
Hover ME
</button>
<br />
<button className="flex items-center bg-darkGreenBg text-white text-sm md:text-base rounded px-6 py-2 my-2">
اطلاعات بیشتر
<img src={whiteLeftArrow} alt="" className="w-4 mr-1" />
</button>
</div>
<div>
<button className="border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded px-6 py-2 my-2">
اطلاعات بیشتر
</button>
<br />
<button className="border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
اطلاعات بیشتر
</button>
<br />
<button className="flex items-center border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
اطلاعات بیشتر
<img src={greenLeftArrow} alt="" className="w-4 mr-1" />
</button>
<button className="flex items-center text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
<button
className={`btnUiDesign ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
>
اطلاعات بیشتر
<img src={greenLeftArrow} alt="" className="w-4 mr-1" />
</button>
<button className="flex items-center border-2 border-lightBlueBorderColor text-lightBlueTextColor text-sm md:text-base rounded-full px-6 py-2 my-2">
اطلاعات بیشتر
<span className="bg-darkGreenBg rounded-full p-2 mr-2">
<img src={whiteLeftArrow} alt="" className="w-4" />
</span>
</button>
</div>
<div>
<button className="bg-midGrayBgColor text-cancleButtonTextColor text-sm md:text-base rounded px-6 py-2 my-2">
لغو کردن
</button>
<br />
<button className="bg-midGrayBgColor p-4 rounded-md">
<img src={blackRightArrow} alt="" className="w-4" />
</button>
<button className="bg-midGrayBgColor p-4 rounded-md mr-2">
<img src={blackLeftArrow} alt="" className="w-4" />
</button>
<br />
<button className="bg-darkGreenBg p-4 rounded-md my-2">
<img src={whiteRightArrow} alt="" className="w-4" />
</button>
<button className="bg-darkGreenBg p-4 rounded-md mr-2">
<img src={whiteLeftArrow} alt="" className="w-4" />
</button>
<br />
<button className="bg-midGrayBgColor p-4 rounded-md">
<img src={blackUpwardArrow} alt="" className="w-4" />
</button>
<button className="bg-midGrayBgColor p-4 rounded-md mr-2">
<img src={blackDownwardArrow} alt="" className="w-4" />
</button>
<br />
<button className="bg-darkGreenBg p-4 rounded-full my-2">
<img src={whiteUpwardArrow} alt="" className="w-4 h-4" />
</button>
<button className="bg-darkGreenBg p-4 rounded-full mr-2">
<img src={whiteDownwardArrow} alt="" className="w-4 h-4" />
{leftArrowWhite && (
<img
src={whiteLeftArrow}
alt=""
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
/>
)}
{rightArrowWhite && (
<img
src={whiteRightArrow}
alt=""
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
/>
)}
{upwardArrowWhite && (
<img
src={whiteUpwardArrow}
alt=""
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
/>
)}
{downwardArrowWhite && (
<img
src={whiteDownwardArrow}
alt=""
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
/>
)}
{leftArrowBlack && (
<img
src={blackLeftArrow}
alt=""
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
/>
)}
{rightArrowBlack && (
<img
src={blackRightArrow}
alt=""
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
/>
)}
{upwardArrowBlack && (
<img
src={blackUpwardArrow}
alt=""
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
/>
)}
{downwardArrowBlack && (
<img
src={blackDownwardArrow}
alt=""
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
/>
)}
{circleArrow && (
<span className={`rounded-full p-2 mr-2 ${circleArrowBgClr} `}>
<img src={whiteLeftArrow} alt="" className="w-4" />
</span>
)}
</button>
</div>
</div>
@ -117,3 +129,38 @@ const ButtonDesign = () => {
};
export default ButtonDesign;
// color classes that i defined in tailwind.config.js and we can use for text color:
// ----> text-grayTextColor
// ----> text-white
// color classes that i defined in tailwind.config.js and we can use for background color:
// ----> bg-darkGreenBg
// ----> bg-midGrayBgColor
// color classes that i defined in tailwind.config.js and we can use for border color:
// ----> border-lightBlueBorderColor
ButtonDesign.defaultProps = {
buttonBgColor: "bg-darkGreenBg",
circleArrowBgClr: "bg-darkGreenBg",
buttonTextColor: "text-white",
buttonBorder: "border-b-4",
buttonBorderColor: "border-lightBlueBorderColor",
buttonBorderRadius: "rounded",
buttonPaddingX: "px-6",
buttonPaddingY: "py-4",
imageMarginRight: "mr-2",
imageWidth: "w-4",
imageHeight: "h-4",
// icons
leftArrowWhite: true,
rightArrowWhite: false,
upwardArrowWhite: false,
downwardArrowWhite: false,
leftArrowBlack: false,
rightArrowBlack: false,
upwardArrowBlack: false,
downwardArrowBlack: false,
circleArrow: false,
};

3
src/components/buttonDesign/ButtonDesign.scss
Unescape View File

@ -0,0 +1,3 @@
.btnUiDesign {
@apply flex items-center text-sm md:text-base;
}

735
src/components/productTags/ProductTags.js
Unescape View File

@ -273,735 +273,6 @@ const ProductTags = ({
)}
</button>
</div>
{/* 2 */}
<div className="mt-2 flex flex-wrap w-1/5 ">
<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" />
)}
{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>
</div>
{/* 3 */}
<div className="mt-2 flex flex-wrap w-1/5 ">
<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" />
)}
{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>
</div>
{/* 4 */}
<div className="mt-2 flex flex-wrap w-1/5 ">
<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" />
)}
{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>
</div>
</div>
</section>
);
@ -1036,9 +307,9 @@ export default ProductTags;
// ----> border-darkBlueBorderColor
ProductTags.defaultProps = {
tagtitlecolor: "text-grayTextColor",
tagBgColor: "bg-transparent",
tagBorderColor: "border-grayBorderColor",
tagtitlecolor: "text-lightOrangeTextColor",
tagBgColor: "bg-lightOrangeBgColor",
tagBorderColor: "border-lightOrangeBorderColor",
// for icons
deliveryIcon: true,
rightIcon: false,

10
tailwind.config.js
Unescape View File

@ -35,11 +35,11 @@ module.exports = {
incrementDecrementBg: "#2E7AB5",
darkGreenBg: "#038A99",
midGrayBgColor: "#DBDBDB",
lightOrangeBgColor: "#F7B605",
lightYellowBgColor: "#CEFE2D", //opacity should be 10 % instead of 100%
lightBlueBgColor: "#8891FC", //opacity should be 10 % instead of 100%
lightGreenBgColor: "#5DCE06", //opacity should be 3 % instead of 100%
lightPurpleBgColor: "#A680FF", //opacity should be 8 % instead of 100%
lightOrangeBgColor: "#F7B60511",
lightYellowBgColor: "#CEFE2D11", //opacity should be 10 % instead of 100%
lightBlueBgColor: "#8891FC11", //opacity should be 10 % instead of 100%
lightGreenBgColor: "#5DCE0611", //opacity should be 3 % instead of 100%
lightPurpleBgColor: "#A680FF11", //opacity should be 8 % instead of 100%
}),
borderColor: (theme) => ({
...theme("colors"),

Write Preview
Loading…
Cancel
Save