update App.js and src/components/CardTrelloDesign/index.js

src/components/CardTrelloDesign/index.js

@@ -2,27 +2,33 @@ import React from "react";
 import ButtonNewDesign from "../ButtonNewDesign";
 import CircleInCircle from "../CircleInCircle";
 
-const CardTrelloDesign = () => {
+import profilePic1 from "./images/profilePic1.svg";
+import profilePic2 from "./images/profilePic2.svg";
+import profilePic3 from "./images/profilePic3.svg";
+
+const CardTrelloDesign = ({ circle, pictures }) => {
   return (
     <div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3">
       {/* top */}
       <div className="flex flex-row justify-between items-center">
         {/* right */}
-        <CircleInCircle
-          parentWidth={"w-6"}
-          parentHeight={"h-6"}
-          chidlWidth={"w-3"}
-          chidlHeight={"h-3"}
-          parentBg={"bg-[#FF000044]"}
-          childBg={"bg-[#FF0000]"}
-        />
+        {circle && (
+          <CircleInCircle
+            parentWidth={"w-5"}
+            parentHeight={"h-5"}
+            chidlWidth={"w-2"}
+            chidlHeight={"h-2"}
+            parentBg={"bg-[#FF000044]"}
+            childBg={"bg-[#FF0000]"}
+          />
+        )}
         {/* left */}
-        <div className="flex flex-row gap-x-1 items-center">
+        <div className="flex flex-row gap-x-1 items-center place-content-end">
           <ButtonNewDesign
             bgColor={"bg-[#FF0A3C]"}
             bgHoverColor={"bg-transparent"}
             border={"border-none"}
-            padding={"p-2"}
+            padding={"p-1.5"}
             fontSize={"text-xs"}
             borderRadius={"rounded-md"}
             icon={false}
@@ -32,7 +38,7 @@ const CardTrelloDesign = () => {
             bgColor={"bg-[#0AABFF]"}
             bgHoverColor={"bg-transparent"}
             border={"border-none"}
-            padding={"p-2"}
+            padding={"p-1.5"}
             fontSize={"text-xs"}
             borderRadius={"rounded-md"}
             icon={false}
@@ -42,7 +48,7 @@ const CardTrelloDesign = () => {
             bgColor={"bg-[#C7FF0A]"}
             bgHoverColor={"bg-transparent"}
             border={"border-none"}
-            padding={"p-2"}
+            padding={"p-1.5"}
             fontSize={"text-xs"}
             borderRadius={"rounded-md"}
             icon={false}
@@ -58,8 +64,34 @@ const CardTrelloDesign = () => {
         طراحی رابط کاربری و تجربه کاربر پروژه اندیشمند به همراه موارد اطلاحی
         پروژه دانوین
       </p>
+      {/* bottom */}
+      <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) => (
+            <img src={pic.image} alt="" className="w-10" />
+          ))}
+        </div>
+        {/* left */}
+        <button>mahdi</button>
+      </div>
     </div>
   );
 };
 
 export default CardTrelloDesign;
+
+CardTrelloDesign.defaultProps = {
+  circle: true,
+  pictures: [
+    {
+      image: profilePic1,
+    },
+    {
+      image: profilePic2,
+    },
+    {
+      image: profilePic3,
+    },
+  ],
+};