update

src/components/productTags/ProductTags.js

@@ -4,7 +4,7 @@ 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";
 
-const ProductTags = () => {
+const ProductTags = ({ tagtitlecolor }) => {
   return (
     <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       <div className="flex items-center justify-between mb-6">
@@ -15,8 +15,10 @@ const ProductTags = () => {
       {/* product UI Design */}
       <div className="flex flex-wrap items-center justify-around ">
         {/* 1 */}
-        <div className="mt-2 flex flex-wrap w-1/4	 ">
-          <button className=" rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
+        <div className="mt-2 flex flex-wrap w-1/5	 ">
+          <button
+            className={`rounded  border border-productTagBorderColor1 m-1 px-4 py-1 text-xs ${tagtitlecolor}`}
+          >
             ارسال رایگان
           </button>
           <button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
@@ -39,7 +41,7 @@ const ProductTags = () => {
           </button>
         </div>
         {/* 2 */}
-        <div className="mt-2 flex flex-wrap w-1/4	">
+        <div className="mt-2 flex flex-wrap w-1/5	">
           <button className=" rounded text-moreInfoButtonTextColor border border-moreInfoButtonBorderColor m-1 px-4 py-1 text-xs">
             ارسال رایگان
           </button>
@@ -63,7 +65,7 @@ const ProductTags = () => {
           </button>
         </div>
         {/* 3 */}
-        <div className="mt-2 flex flex-wrap w-1/4	">
+        <div className="mt-2 flex flex-wrap w-1/5	">
           <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
             ارسال رایگان
             <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
@@ -94,7 +96,7 @@ const ProductTags = () => {
           </button>
         </div>
         {/* 4 */}
-        <div className="mt-2 flex flex-wrap w-1/4	">
+        <div className="mt-2 flex flex-wrap w-1/5	">
           <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
             ارسال رایگان
             <img src={blackCancleIcon} alt="" className="mr-2 w-2" />
@@ -125,7 +127,7 @@ const ProductTags = () => {
           </button>
         </div>
         {/* 5 */}
-        <div className="mt-2 flex flex-wrap w-1/4	">
+        <div className="mt-2 flex flex-wrap w-1/5	">
           <button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
             <img src={blackDeliveryIcon} alt="" className="ml-1 w-3" />
             ارسال رایگان
@@ -167,3 +169,7 @@ const ProductTags = () => {
 };
 
 export default ProductTags;
+
+ProductTags.defaultProps = {
+  tagtitlecolor: "text-red-400",
+};