update src/components/CardTrelloDesign/index.js

src/components/CardTrelloDesign/images/message-text.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.608" height="16" viewBox="0 0 15.608 16">
+  <defs>
+    <clipPath id="clip-path">
+      <rect width="15.608" height="16" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="message-text" clip-path="url(#clip-path)">
+    <g id="message-text-2" data-name="message-text">
+      <path id="Vector" d="M8.735,11.333h.324c2.588,0,3.882-.667,3.882-4V4q0-4-3.882-4H3.882Q0,0,0,4V7.333q0,4,3.882,4h.324a.65.65,0,0,1,.518.267l.971,1.333a.905.905,0,0,0,1.553,0L8.218,11.6A.724.724,0,0,1,8.735,11.333Z" transform="translate(1.333 1.333)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
+      <path id="Vector-2" data-name="Vector" d="M6.667,0H0" transform="translate(4.471 5.333)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
+      <path id="Vector-3" data-name="Vector" d="M4,0H0" transform="translate(7.094 8.667)" fill="none" stroke="#707070" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5"/>
+      <path id="Vector-4" data-name="Vector" d="M15.608,0H0V16H15.608Z" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/CardTrelloDesign/index.js

@@ -8,6 +8,7 @@ import profilePic2 from "./images/profilePic2.svg";
 import profilePic3 from "./images/profilePic3.svg";
 import clock from "./images/clock.svg";
 import nike from "./images/nike.svg";
+import messageText from "./images/message-text.svg";
 
 const CardTrelloDesign = ({ circle, pictures }) => {
   return (
@@ -77,6 +78,10 @@ const CardTrelloDesign = ({ circle, pictures }) => {
         </div>
         {/* left */}
         <div className="flex flex-row items-center gap-x-1">
+          <div className="flex flex-row items-center">
+            <span className="text-xs text-[#707070]">10</span>
+            <img src={messageText} alt="" className="w-5" />
+          </div>
           <NewTagDesign
             title="29 فروردین"
             align={"flex-row-reverse"}
@@ -90,16 +95,19 @@ const CardTrelloDesign = ({ circle, pictures }) => {
             paddingY={"p-2"}
             paddingX={"p-2"}
           />
-          {/* <NewTagDesign
-            title="29 فروردین"
+          <NewTagDesign
+            title="12 از 13"
             align={"flex-row-reverse"}
-            titleColor="text-[#007987]"
-            tagBgColor={"#06BACE"}
+            titleColor="text-[#FFB300]"
+            tagBgColor={"bg-[#FFAA0033]"}
             border={"border-none"}
             iconWidth={"w-4"}
-            // marginRight
+            marginRight="mr-0"
+            marginLeft="ml-1"
             icon={nike}
-          /> */}
+            paddingY={"p-2"}
+            paddingX={"p-2"}
+          />
         </div>
       </div>
     </div>