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

src/components/CardTrelloDesign/index.js

@@ -53,7 +53,7 @@ const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag }) => {
       <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"} width={"w-10"} />
+          <ProfilePicNextToEachOther num={3} marginLeft={"3px"} width={"w-10"} />
         </div>
         {/* left */}
         <div className="flex flex-row items-center gap-x-1">

src/components/ProfilePicNextToEachOther/index.js

@@ -10,14 +10,21 @@ const ProfilePicNextToEachOther = ({ users,num,marginLeft,width }) => {
   return (
     <div className="flex">
       {users.slice(0, num).map((user, i) => (
-        <img
+        <div className="flex flex-row items-center">
-          key={i}
+          <img
-          src={user.picture}
+            key={i}
-          className={`rounded-full ${width}`}
+            src={user.picture}
-          alt="profile-pic"
+            className={`rounded-full ${width}`}
-          style={{ marginLeft: `${marginLeft}` }}
+            alt="profile-pic"
-        />
+            style={{ marginLeft: `${marginLeft}` }}
-      ))}
+          />
+          {Number(i) === (num - 1) && (
+            <div class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 border-2 border-gray-700 rounded-full hover:bg-gray-600">
+              + {users.length - (num)}
+            </div>
+          )}
+        </div>
+        ))}
     </div>
   );
 };