From e946e209813a04dfcf6755927e8521df1fe21637 Mon Sep 17 00:00:00 2001
From: mahdi andalib <andalibmahdi45@gmail.com>
Date: Mon, 11 Apr 2022 23:49:20 +0430
Subject: [PATCH] update src/components/CardTrelloDesign/index.js and
 src/components/NewTagDesign/index.js

---
 .../CardTrelloDesign/images/clock.svg         | 18 +++++++++++++
 .../CardTrelloDesign/images/nike.svg          | 16 +++++++++++
 src/components/CardTrelloDesign/index.js      | 27 +++++++++++++++++--
 src/components/NewTagDesign/index.js          | 22 +++++++++++++--
 4 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 src/components/CardTrelloDesign/images/clock.svg
 create mode 100644 src/components/CardTrelloDesign/images/nike.svg

diff --git a/src/components/CardTrelloDesign/images/clock.svg b/src/components/CardTrelloDesign/images/clock.svg
new file mode 100644
index 0000000..bdfd0b6
--- /dev/null
+++ b/src/components/CardTrelloDesign/images/clock.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11.528" height="11.528" viewBox="0 0 11.528 11.528">
+  <defs>
+    <clipPath id="clip-path">
+      <rect width="11.528" height="11.528" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="vuesax_linear_clock" data-name="vuesax/linear/clock" clip-path="url(#clip-path)">
+    <g id="vuesax_linear_clock-2" data-name="vuesax/linear/clock" transform="translate(-172 -188)">
+      <g id="clock" transform="translate(172 188)" clip-path="url(#clip-path)">
+        <g id="clock-2" data-name="clock">
+          <path id="Vector" d="M9.607,4.8A4.8,4.8,0,1,1,4.8,0,4.805,4.805,0,0,1,9.607,4.8Z" transform="translate(0.961 0.961)" fill="none" stroke="#007987" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
+          <path id="Vector-2" data-name="Vector" d="M1.96,3.684.471,2.8A1.064,1.064,0,0,1,0,1.969V0" transform="translate(5.586 3.607)" fill="none" stroke="#007987" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
+          <path id="Vector-3" data-name="Vector" d="M0,0H11.528V11.528H0Z" fill="none" opacity="0"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/components/CardTrelloDesign/images/nike.svg b/src/components/CardTrelloDesign/images/nike.svg
new file mode 100644
index 0000000..c7a93b4
--- /dev/null
+++ b/src/components/CardTrelloDesign/images/nike.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" viewBox="0 0 10 10">
+  <defs>
+    <clipPath id="clip-path">
+      <rect width="10" height="10" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Repeat_Grid_1" data-name="Repeat Grid 1" clip-path="url(#clip-path)">
+    <g transform="translate(-1538 -325)">
+      <g id="Rectangle_303" data-name="Rectangle 303" transform="translate(1538 325)" fill="none" stroke="#ffb300" stroke-width="0.5">
+        <rect width="10" height="10" rx="2" stroke="none"/>
+        <rect x="0.25" y="0.25" width="9.5" height="9.5" rx="1.75" fill="none"/>
+      </g>
+      <path id="Vector" d="M0,4.036,1.775,6.2l3.254-4.57" transform="translate(1540.5 325.874)" fill="none" stroke="#ffb300" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.7"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/components/CardTrelloDesign/index.js b/src/components/CardTrelloDesign/index.js
index 8141e95..20285f0 100644
--- a/src/components/CardTrelloDesign/index.js
+++ b/src/components/CardTrelloDesign/index.js
@@ -6,6 +6,8 @@ import NewTagDesign from "../NewTagDesign";
 import profilePic1 from "./images/profilePic1.svg";
 import profilePic2 from "./images/profilePic2.svg";
 import profilePic3 from "./images/profilePic3.svg";
+import clock from "./images/clock.svg";
+import nike from "./images/nike.svg";
 
 const CardTrelloDesign = ({ circle, pictures }) => {
   return (
@@ -75,8 +77,29 @@ const CardTrelloDesign = ({ circle, pictures }) => {
         </div>
         {/* left */}
         <div className="flex flex-row items-center gap-x-1">
-          <NewTagDesign />
-          <NewTagDesign />
+          <NewTagDesign
+            title="29 فروردین"
+            align={"flex-row-reverse"}
+            titleColor="text-[#007987]"
+            tagBgColor={"bg-[#06BACE33]"}
+            border={"border-none"}
+            iconWidth={"w-4"}
+            marginRight="mr-0"
+            marginLeft="ml-1"
+            icon={clock}
+            paddingY={"p-2"}
+            paddingX={"p-2"}
+          />
+          {/* <NewTagDesign
+            title="29 فروردین"
+            align={"flex-row-reverse"}
+            titleColor="text-[#007987]"
+            tagBgColor={"#06BACE"}
+            border={"border-none"}
+            iconWidth={"w-4"}
+            // marginRight
+            icon={nike}
+          /> */}
         </div>
       </div>
     </div>
diff --git a/src/components/NewTagDesign/index.js b/src/components/NewTagDesign/index.js
index 131127c..527881a 100644
--- a/src/components/NewTagDesign/index.js
+++ b/src/components/NewTagDesign/index.js
@@ -10,13 +10,25 @@ const NewTagDesign = ({
   icon,
   fontSize,
   border,
+  iconWidth,
+  marginRight,
+  marginLeft,
+  align,
+  paddingY,
+  paddingX,
 }) => {
   return (
     <button
-      className={`flex flex-row items-center rounded px-2 py-0.5 ${border} ${fontSize} ${titleColor} ${tagBorderColor} ${tagBgColor} `}
+      className={`flex ${align} items-center rounded ${paddingY} ${paddingX} ${border} ${fontSize} ${titleColor} ${tagBorderColor} ${tagBgColor} `}
     >
       {title}
-      {icon && <img src={icon} alt="" className="mr-5 w-2.5" />}
+      {icon && (
+        <img
+          src={icon}
+          alt=""
+          className={`${marginRight} ${marginLeft} ${iconWidth}`}
+        />
+      )}
     </button>
   );
 };
@@ -25,11 +37,17 @@ export default NewTagDesign;
 
 NewTagDesign.defaultProps = {
   title: "کتاب",
+  align: "flex-row",
   titleColor: "text-blue-600",
   tagBgColor: "bg-blue-300 bg-opacity-10",
   border: "border-2",
   tagBorderColor: "border-blue-600",
   fontSize: "text-xs",
+  iconWidth: "w-2.5",
+  marginRight: "mr-5",
+  paddingY: "p-2",
+  paddingX: "p-1",
+  marginLeft: "ml-4",
   // for icons
   icon: blackCancleIcon,
 };