update src/components/CardTrelloDesign/index.js

src/components/CardTrelloDesign/index.js

@@ -3,16 +3,13 @@ import ButtonNewDesign from "../ButtonNewDesign";
 import CircleInCircle from "../CircleInCircle";
 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";
 import messageText from "./images/message-text.svg";
 import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
 import AnimatedProgressBar from "../AnimatedProgressBar";
 
-const CardTrelloDesign = ({ circle, pictures }) => {
+const CardTrelloDesign = ({ circle,commnets,tags, }) => {
   return (
     <div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3">
       {/* top */}
@@ -77,46 +74,45 @@ const CardTrelloDesign = ({ circle, pictures }) => {
       <div className="flex flex-row justify-between items-center mt-3">
         {/* right */}
         <div className="flex flex-row items-center gap-x-1">
-          {/* {pictures.map((pic, index) => (
+          <ProfilePicNextToEachOther num={3} marginLeft={"4px"} />
-            <img src={pic.image} alt="" className="w-10" />
-          ))} */}
-          <ProfilePicNextToEachOther num={3} marginLeft={"5px"} />
         </div>
         {/* left */}
         <div className="flex flex-row items-center gap-x-1">
           {/* comment Icon */}
+          {commnets && (
           <div className="flex flex-row items-center ml-1">
             <span className="text-xs ml-0.5 text-[10px] text-[#707070]">10</span>
             <img src={messageText} alt="comment-icon" className="w-5" />
           </div>
-          <NewTagDesign
+          )}
-            title="29 فروردین"
+            <NewTagDesign
-            align={"flex-row-reverse"}
+              title="29 فروردین"
-            titleColor="text-[#007987]"
+              align={"flex-row-reverse"}
-            tagBgColor={"bg-[#06BACE33]"}
+              titleColor="text-[#007987]"
-            border={"border-none"}
+              tagBgColor={"bg-[#06BACE33]"}
-            borderRadius={"rounded-sm"}
+              border={"border-none"}
-            iconWidth={"w-4"}
+              borderRadius={"rounded-sm"}
-            marginRight="mr-0"
+              iconWidth={"w-4"}
-            marginLeft="ml-1"
+              marginRight="mr-0"
-            icon={clock}
+              marginLeft="ml-1"
-            paddingY={"p-1"}
+              icon={clock}
-            paddingX={"p-1"}
+              paddingY={"p-1"}
-          />
+              paddingX={"p-1"}
-          <NewTagDesign
+            />
-            title="12 از 13"
+            <NewTagDesign
-            align={"flex-row-reverse"}
+              title="12 از 13"
-            titleColor="text-[#FFB300]"
+              align={"flex-row-reverse"}
-            tagBgColor={"bg-[#FFAA0033]"}
+              titleColor="text-[#FFB300]"
-            border={"border-none"}
+              tagBgColor={"bg-[#FFAA0033]"}
-            borderRadius={"rounded-sm"}
+              border={"border-none"}
-            iconWidth={"w-4"}
+              borderRadius={"rounded-sm"}
-            marginRight="mr-0"
+              iconWidth={"w-4"}
-            marginLeft="ml-1"
+              marginRight="mr-0"
-            icon={nike}
+              marginLeft="ml-1"
-            paddingY={"p-1"}
+              icon={nike}
-            paddingX={"p-1"}
+              paddingY={"p-1"}
-          />
+              paddingX={"p-1"}
+            />
         </div>
       </div>
       {/* progressBar */}
@@ -129,15 +125,6 @@ export default CardTrelloDesign;
 
 CardTrelloDesign.defaultProps = {
   circle: true,
-  pictures: [
+  commnets: false,
-    {
+  tags: false
-      image: profilePic1,
-    },
-    {
-      image: profilePic2,
-    },
-    {
-      image: profilePic3,
-    },
-  ],
 };