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

Loading…
Cancel
Save