update src/components/CardTrelloDesign/index.js, src/components/CircleInCircle/index.js and src/components/ProfilePicNextToEachOther/index.js

src/components/CardTrelloDesign/index.js

@@ -27,30 +27,9 @@ const CardTrelloDesign = ({ circle,commnets,tags, }) => {
         )}
         {/* left */}
         <div className="flex flex-row gap-x-1 items-center place-content-end">
-          <ButtonNewDesign
+
-            bgColor={"bg-[#FF0A3C]"}
+          {tags.map(tag=> <ButtonNewDesign
-            bgHoverColor={"bg-transparent"}
+            bgColor={`bg-[${tag.color}]`}
-            border={"border-none"}
-            paddingX={"p-1"}
-            paddingY={"p-0.5"}
-            fontSize={"text-xs"}
-            borderRadius={"rounded-sm"}
-            icon={false}
-            text={"رابط کاربری"}
-          />
-          <ButtonNewDesign
-            bgColor={"bg-[#0AABFF]"}
-            bgHoverColor={"bg-transparent"}
-            border={"border-none"}
-            paddingX={"p-1"}
-            paddingY={"p-0.5"}
-            fontSize={"text-xs"}
-            borderRadius={"rounded-sm"}
-            icon={false}
-            text={"فرانت اند"}
-          />
-          <ButtonNewDesign
-            bgColor={"bg-[#C7FF0A]"}
             bgHoverColor={"bg-transparent"}
             border={"border-none"}
             paddingX={"p-1"}
@@ -58,8 +37,10 @@ const CardTrelloDesign = ({ circle,commnets,tags, }) => {
             fontSize={"text-xs"}
             borderRadius={"rounded-sm"}
             icon={false}
-            text={"بک اند"}
+            text={tag.name}
-          />
+          />)}
+
+        
         </div>
       </div>
       {/* middle */}
@@ -74,7 +55,7 @@ const CardTrelloDesign = ({ circle,commnets,tags, }) => {
       <div className="flex flex-row justify-between items-center mt-3">
         {/* right */}
         <div className="flex flex-row items-center gap-x-1">
-          <ProfilePicNextToEachOther num={3} marginLeft={"4px"} />
+          <ProfilePicNextToEachOther num={3} marginLeft={"4px"} width={"w-10"} />
         </div>
         {/* left */}
         <div className="flex flex-row items-center gap-x-1">
@@ -125,6 +106,20 @@ export default CardTrelloDesign;
 
 CardTrelloDesign.defaultProps = {
   circle: true,
-  commnets: false,
+  commnets: true,
-  tags: false
+  tags: [
+    {
+      name: "بک اند",
+      color: "#C7FF0A"
+    },
+    {
+      name: "بک اند",
+      color: "#0AABFF"
+    },
+    {
+      name: "بک اند",
+      color: "#C7FF0A"
+    }
+  ]
+
 };

src/components/CircleInCircle/index.js

@@ -10,7 +10,7 @@ const CircleInCircle = ({
 }) => {
   return (
     <div
-      className={` ${parentBg} ${parentWidth} ${parentHeight}  rounded-full relative `}
+      className={` ${parentBg} ${parentWidth} ${parentHeight} rounded-full relative `}
     >
       <div
         className={`${childBg} ${chidlWidth} ${chidlHeight} rounded-full absolute left-1/2 bottom-1/2 transform -translate-x-1/2 translate-y-1/2`}

src/components/ProfilePicNextToEachOther/index.js

@@ -6,14 +6,14 @@ import profilePic3 from "./images/profilePic3.svg";
 import profilePic4 from "./images/profilePic4.svg";
 import profilePic5 from "./images/profilePic5.svg";
 
-const ProfilePicNextToEachOther = ({ users,num,marginLeft }) => {
+const ProfilePicNextToEachOther = ({ users,num,marginLeft,width }) => {
   return (
     <div className="flex">
       {users.slice(0, num).map((user, i) => (
         <img
           key={i}
           src={user.picture}
-          className="w-10 h-10 rounded-full"
+          className={`rounded-full ${width}`}
           alt="profile-pic"
           style={{ marginLeft: `${marginLeft}` }}
         />
@@ -27,6 +27,7 @@ export default ProfilePicNextToEachOther;
 ProfilePicNextToEachOther.defaultProps = {
   num: 8,
   marginLeft: "-10px",
+  width: "w-10",
   users: [
     {
       picture: profilePic1,