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

master
Your Name 2 years ago
parent b624264ad6
commit 71ac4fcd1f
  1. 2
      src/components/CardTrelloDesign/index.js
  2. 23
      src/components/ProfilePicNextToEachOther/index.js

@ -53,7 +53,7 @@ const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag }) => {
<div className="flex flex-row justify-between items-center mt-3">
{/* right */}
<div className="flex flex-row items-center gap-x-1">
<ProfilePicNextToEachOther num={3} marginLeft={"4px"} width={"w-10"} />
<ProfilePicNextToEachOther num={3} marginLeft={"3px"} width={"w-10"} />
</div>
{/* left */}
<div className="flex flex-row items-center gap-x-1">

@ -10,14 +10,21 @@ const ProfilePicNextToEachOther = ({ users,num,marginLeft,width }) => {
return (
<div className="flex">
{users.slice(0, num).map((user, i) => (
<img
key={i}
src={user.picture}
className={`rounded-full ${width}`}
alt="profile-pic"
style={{ marginLeft: `${marginLeft}` }}
/>
))}
<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>
);
};

Loading…
Cancel
Save