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,6 +10,7 @@ const ProfilePicNextToEachOther = ({ users,num,marginLeft,width }) => {
   return (
     <div className="flex">
       {users.slice(0, num).map((user, i) => (
+        <div className="flex flex-row items-center">
           <img
             key={i}
             src={user.picture}
@@ -17,6 +18,12 @@ const ProfilePicNextToEachOther = ({ users,num,marginLeft,width }) => {
             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>
   );