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. 7
      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"> <div className="flex flex-row justify-between items-center mt-3">
{/* right */} {/* right */}
<div className="flex flex-row items-center gap-x-1"> <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> </div>
{/* left */} {/* left */}
<div className="flex flex-row items-center gap-x-1"> <div className="flex flex-row items-center gap-x-1">

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

Loading…
Cancel
Save