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

productTagsAdded

Browse Source
master
mahdi 3 years ago
parent 98e9c8dea1
commit 39b4fc8d1c
7 changed files with 207 additions and 2 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. 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

6
src/App.js
Unescape View File

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

8
src/assets/icons/black-cancle-icon.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 558 B

15
src/assets/icons/black-delivery-icon.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

9
src/assets/icons/black-right-icon.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1021 B

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

@ -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;

0
src/components/productTags/ProductTags.scss
Unescape View File

2
tailwind.config.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save