55 lines
1.4 KiB
55 lines
1.4 KiB
import React from "react"; |
|
|
|
import profilePic1 from "./images/profilePic1.svg"; |
|
import profilePic2 from "./images/profilePic2.svg"; |
|
import profilePic3 from "./images/profilePic3.svg"; |
|
import profilePic4 from "./images/profilePic4.svg"; |
|
import profilePic5 from "./images/profilePic5.svg"; |
|
|
|
const ProfilePicNextToEachOther = ({ users, num, marginLeft, width }) => { |
|
return ( |
|
<div className="flex cursor-pointer"> |
|
{users.slice(0, num).map((user, i) => ( |
|
<div className="flex flex-row items-center"> |
|
<img |
|
key={i} |
|
src={user.picture} |
|
className={`rounded-full ${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> |
|
); |
|
}; |
|
|
|
export default ProfilePicNextToEachOther; |
|
|
|
ProfilePicNextToEachOther.defaultProps = { |
|
num: 8, |
|
marginLeft: "-10px", |
|
width: "w-10", |
|
users: [ |
|
{ |
|
picture: profilePic1, |
|
}, |
|
{ |
|
picture: profilePic2, |
|
}, |
|
{ |
|
picture: profilePic3, |
|
}, |
|
{ |
|
picture: profilePic4, |
|
}, |
|
{ |
|
picture: profilePic5, |
|
}, |
|
], |
|
};
|
|
|