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,
},
],
};