update src/components/ProfilePicNextToEachOther/index.js

src/components/ProfilePicNextToEachOther/index.js

@@ -6,19 +6,25 @@ import profilePic3 from "./images/profilePic3.svg";
 import profilePic4 from "./images/profilePic4.svg";
 import profilePic5 from "./images/profilePic5.svg";
 
-const ProfilePicNextToEachOther = ({ users, num, marginLeft, width }) => {
+const ProfilePicNextToEachOther = ({
+  users,
+  num,
+  circleClass,
+  holderClass,
+  showRest,
+}) => {
   return (
     <div className="flex cursor-pointer">
       {users.slice(0, num).map((user, i) => (
-        <div className="flex flex-row items-center">
+        <div className={`flex flex-row items-center ${holderClass}`}>
           <img
             key={i}
             src={user.picture}
-            className={`rounded-full ml-0.5 ${width}`}
+            className={`rounded-full ${circleClass}`}
             alt="profile-pic"
           />
-          {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">
+          {showRest && Number(i) === num - 1 && (
+            <div class="flex items-center justify-center w-10 h-10 mr-0.5 text-xs text-white bg-gray-700 border-2 border-gray-700 rounded-full hover:bg-gray-600">
               + {users.length - num}
             </div>
           )}
@@ -33,8 +39,11 @@ export default ProfilePicNextToEachOther;
 ProfilePicNextToEachOther.defaultProps = {
   num: 8,
 
+  holderClass: "m-0.5",
   circleClass: "w-10",
 
+  showRest: true,
+
   users: [
     {
       picture: profilePic1,