productTagsAdded

master
mahdi 3 years ago
parent 98e9c8dea1
commit 39b4fc8d1c
  1. 6
      src/App.js
  2. 8
      src/assets/icons/black-cancle-icon.svg
  3. 15
      src/assets/icons/black-delivery-icon.svg
  4. 9
      src/assets/icons/black-right-icon.svg
  5. 169
      src/components/productTags/ProductTags.js
  6. 0
      src/components/productTags/ProductTags.scss
  7. 2
      tailwind.config.js

@ -1,12 +1,14 @@
import "./App.scss"; import "./App.scss";
import ButtonDesign from "./components/buttonDesign/ButtonDesign"; import ButtonDesign from "./components/buttonDesign/ButtonDesign";
import ProductDesign from "./components/productDesign/ProductDesign"; import ProductDesign from "./components/productDesign/ProductDesign";
import ProductTags from "./components/productTags/ProductTags";
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<ProductDesign /> {/* <ProductDesign /> */}
<ButtonDesign /> {/* <ButtonDesign /> */}
<ProductTags />
</div> </div>
); );
} }

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="10.471" height="10.471" viewBox="0 0 10.471 10.471">
<g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
<g id="card-remove" transform="translate(253.309 512.31)">
<path id="Vector" d="M0,8.774,8.774,0" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.2"/>
<path id="Vector-2" data-name="Vector" d="M8.774,8.774,0,0" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="1.2"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 558 B

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.887" height="15.887" viewBox="0 0 15.887 15.887">
<g id="vuesax_linear_group" data-name="vuesax/linear/group" transform="translate(-748 -188)">
<g id="group" transform="translate(748 188)">
<path id="Vector" d="M6.282,7.943h.662A1.328,1.328,0,0,0,8.268,6.619V0H2.31A2.645,2.645,0,0,0,0,1.357" transform="translate(1.661 1.324)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M0,7.943A1.983,1.983,0,0,0,1.986,9.929h.662a1.324,1.324,0,1,1,2.648,0H7.943a1.324,1.324,0,1,1,2.648,0h.662a1.983,1.983,0,0,0,1.986-1.986V5.958H11.253a.664.664,0,0,1-.662-.662V3.31a.664.664,0,0,1,.662-.662h.854L10.975.669A1.335,1.335,0,0,0,9.823,0H8.605V4.634A1.328,1.328,0,0,1,7.281,5.958H6.619" transform="translate(1.324 3.31)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-3" data-name="Vector" d="M2.648,1.324A1.324,1.324,0,1,1,1.324,0,1.324,1.324,0,0,1,2.648,1.324Z" transform="translate(3.972 11.915)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-4" data-name="Vector" d="M2.648,1.324A1.324,1.324,0,1,1,1.324,0,1.324,1.324,0,0,1,2.648,1.324Z" transform="translate(9.267 11.915)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-5" data-name="Vector" d="M2.648,1.986V3.31H.662A.664.664,0,0,1,0,2.648V.662A.664.664,0,0,1,.662,0h.854Z" transform="translate(11.915 5.958)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-6" data-name="Vector" d="M0,0H3.972" transform="translate(1.324 5.296)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-7" data-name="Vector" d="M0,0H2.648" transform="translate(1.324 7.281)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-8" data-name="Vector" d="M0,0H1.324" transform="translate(1.324 9.267)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-9" data-name="Vector" d="M0,0H15.887V15.887H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.887" height="15.887" viewBox="0 0 15.887 15.887">
<g id="vuesax_linear_shield-tick" data-name="vuesax/linear/shield-tick" transform="translate(-300 -188)">
<g id="shield-tick" transform="translate(300 188)">
<path id="Vector" d="M4.687.154,1.383,1.4A2.3,2.3,0,0,0,0,3.391V8.309a3.218,3.218,0,0,0,1.145,2.277l2.846,2.125a3.013,3.013,0,0,0,3.4,0l2.846-2.125a3.218,3.218,0,0,0,1.145-2.277V3.391a2.3,2.3,0,0,0-1.383-2L6.7.154A3.366,3.366,0,0,0,4.687.154Z" transform="translate(2.257 1.322)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M0,1.781,1.066,2.846,3.912,0" transform="translate(5.991 6.077)" fill="none" stroke="#646464" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-3" data-name="Vector" d="M0,0H15.887V15.887H0Z" transform="translate(15.887 15.887) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1021 B

@ -0,0 +1,169 @@
import React from "react";
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 = () => {
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">
<h2 className="text-base bg-red-500 rounded-full shadow-sm shadow-black text-white p-2">
تگ محصولات
</h2>
</div>
{/* 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">
ارسال رایگان
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
برچسب های دیگر
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
امتحان سخت
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
امتحان آسان
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
آزمون
</button>
</div>
{/* 2 */}
<div className="mt-2 flex flex-wrap w-1/4 ">
<button className=" rounded text-moreInfoButtonTextColor border border-moreInfoButtonBorderColor m-1 px-4 py-1 text-xs">
ارسال رایگان
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
برچسب های دیگر
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
امتحان سخت
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
</button>
<button className="rounded text-moreInfoButtonTextColor border border-moreInfoButtonBorderColor m-1 px-4 py-1 text-xs">
امتحان آسان
</button>
<button className="rounded text-moreInfoButtonTextColor border border-moreInfoButtonBorderColor m-1 px-4 py-1 text-xs">
بسته بندی به صورت کادو
</button>
<button className="rounded text-cancleButtonTextColor border border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
آزمون
</button>
</div>
{/* 3 */}
<div className="mt-2 flex flex-wrap w-1/4 ">
<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" />
</button>
<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" />
</button>
<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" />
</button>
<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" />
</button>
<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" />
</button>
<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" />
</button>
<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" />
</button>
</div>
{/* 4 */}
<div className="mt-2 flex flex-wrap w-1/4 ">
<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" />
</button>
<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" />
</button>
<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" />
</button>
<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" />
</button>
<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" />
</button>
<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" />
</button>
<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" />
</button>
</div>
{/* 5 */}
<div className="mt-2 flex flex-wrap w-1/4 ">
<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={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<button className="flex items-center rounded text-cancleButtonTextColor border-2 border-productTagBorderColor1 m-1 px-4 py-1 text-xs">
<img src={blackRightIcon} alt="" className="ml-1 w-3" />
ارسال رایگان
<img src={blackCancleIcon} alt="" className="mr-2 w-2" />
</button>
<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" />
</button>
<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" />
</button>
<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" />
</button>
<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" />
</button>
<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" />
</button>
<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" />
</button>
</div>
</div>
</section>
);
};
export default ProductTags;

@ -39,6 +39,8 @@ module.exports = {
productDesignBorderColor: "#F3F3F3", productDesignBorderColor: "#F3F3F3",
// used in ButtonDesign Component // used in ButtonDesign Component
moreInfoButtonBorderColor: "#06BACE", moreInfoButtonBorderColor: "#06BACE",
// used in ProductTags Component
productTagBorderColor1: "#C3C3C3",
}), }),
}, },
plugins: [], plugins: [],

Loading…
Cancel
Save