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

src/App.js

@@ -144,7 +144,7 @@ function App() {
         {/* <OutlineInput /> */}
         {/* <ButtonNewDesign /> */}
         {/* <CancleIcon /> */}
-        {/* <ProfilePicNextToEachOther /> */}
+        <ProfilePicNextToEachOther />
         {/* <SemiDonut /> */}
         {/* <FolderTree /> */}
         {/* <GridListTable /> */}

src/components/CardTrelloDesign/index.js

@@ -9,6 +9,7 @@ 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";
 
 const CardTrelloDesign = ({ circle, pictures }) => {
   return (
@@ -75,9 +76,10 @@ 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) => (
+          {/* {pictures.map((pic, index) => (
             <img src={pic.image} alt="" className="w-10" />
-          ))}
+          ))} */}
+          <ProfilePicNextToEachOther num={3} />
         </div>
         {/* left */}
         <div className="flex flex-row items-center gap-x-1">

src/components/ProfilePicNextToEachOther/index.js

@@ -6,10 +6,10 @@ import profilePic3 from "./images/profilePic3.svg";
 import profilePic4 from "./images/profilePic4.svg";
 import profilePic5 from "./images/profilePic5.svg";
 
-const ProfilePicNextToEachOther = ({ users }) => {
+const ProfilePicNextToEachOther = ({ users,num }) => {
   return (
     <div className="flex flex-row">
-      {users.slice(0, 8).map((user, i) => (
+      {users.slice(0, num).map((user, i) => (
         <img
           key={i}
           src={user.picture}
@@ -24,6 +24,7 @@ const ProfilePicNextToEachOther = ({ users }) => {
 export default ProfilePicNextToEachOther;
 
 ProfilePicNextToEachOther.defaultProps = {
+  num: 8,
   users: [
     {
       picture: profilePic1,