update src/components/CardTrelloDesign/index.js

src/components/CardTrelloDesign/index.js

@@ -9,7 +9,7 @@ import messageText from "./images/message-text.svg";
 import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
 import AnimatedProgressBar from "../AnimatedProgressBar";
 
-const CardTrelloDesign = ({ circle,commnets,tags, }) => {
+const CardTrelloDesign = ({ circle,commnets,buttons,tags, }) => {
   return (
     <div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3">
       {/* top */}
@@ -27,9 +27,8 @@ const CardTrelloDesign = ({ circle,commnets,tags, }) => {
         )}
         {/* left */}
         <div className="flex flex-row gap-x-1 items-center place-content-end">
-
+          {buttons.map(btn=> <ButtonNewDesign
-          {tags.map(tag=> <ButtonNewDesign
+            bgColor={`bg-[${btn.color}]`}
-            bgColor={`bg-[${tag.color}]`}
             bgHoverColor={"bg-transparent"}
             border={"border-none"}
             paddingX={"p-1"}
@@ -37,10 +36,8 @@ const CardTrelloDesign = ({ circle,commnets,tags, }) => {
             fontSize={"text-xs"}
             borderRadius={"rounded-sm"}
             icon={false}
-            text={tag.name}
+            text={btn.name}
           />)}
-
-        
         </div>
       </div>
       {/* middle */}
@@ -66,20 +63,7 @@ const CardTrelloDesign = ({ circle,commnets,tags, }) => {
             <img src={messageText} alt="comment-icon" className="w-5" />
           </div>
           )}
-            <NewTagDesign
+          
-              title="29 فروردین"
-              align={"flex-row-reverse"}
-              titleColor="text-[#007987]"
-              tagBgColor={"bg-[#06BACE33]"}
-              border={"border-none"}
-              borderRadius={"rounded-sm"}
-              iconWidth={"w-4"}
-              marginRight="mr-0"
-              marginLeft="ml-1"
-              icon={clock}
-              paddingY={"p-1"}
-              paddingX={"p-1"}
-            />
             <NewTagDesign
               title="12 از 13"
               align={"flex-row-reverse"}
@@ -107,19 +91,31 @@ export default CardTrelloDesign;
 CardTrelloDesign.defaultProps = {
   circle: true,
   commnets: true,
-  tags: [
+  buttons: [
     {
-      name: "بک اند",
+      name: "رابط کاربری",
-      color: "#C7FF0A"
+      color: "#FF0A3A"
     },
     {
-      name: "بک اند",
+      name: "فرانت اند",
       color: "#0AABFF"
     },
     {
       name: "بک اند",
       color: "#C7FF0A"
     }
+  ],
+  tags: [
+    {
+      title:"29 فروردین",
+      color: "text-[#007987]",
+      bgColor: "bg-[#06BACE33]",
+    },
+    {
+      title:"12 از 13",
+      color: "text-[#FFB300]",
+      bgColor: "bg-[#FFAA0033]",
+    },
   ]
 
 };