From 6234ecb25b72c1b954e3ae7f3441e621b9f41e6b Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Tue, 3 May 2022 20:28:50 +0430
Subject: [PATCH] update src/components/ProfilePicNextToEachOther/index.js

---
 .../ProfilePicNextToEachOther/index.js        | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/ProfilePicNextToEachOther/index.js b/src/components/ProfilePicNextToEachOther/index.js
index 0fd4956..a83a6e7 100644
--- a/src/components/ProfilePicNextToEachOther/index.js
+++ b/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,