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

master
Your Name 2 years ago
parent c8179f0b57
commit 6bc5dc5613
  1. 2
      src/App.js
  2. 6
      src/components/CardTrelloDesign/index.js
  3. 5
      src/components/ProfilePicNextToEachOther/index.js

@ -144,7 +144,7 @@ function App() {
{/* <OutlineInput /> */} {/* <OutlineInput /> */}
{/* <ButtonNewDesign /> */} {/* <ButtonNewDesign /> */}
{/* <CancleIcon /> */} {/* <CancleIcon /> */}
{/* <ProfilePicNextToEachOther /> */} <ProfilePicNextToEachOther />
{/* <SemiDonut /> */} {/* <SemiDonut /> */}
{/* <FolderTree /> */} {/* <FolderTree /> */}
{/* <GridListTable /> */} {/* <GridListTable /> */}

@ -9,6 +9,7 @@ import profilePic3 from "./images/profilePic3.svg";
import clock from "./images/clock.svg"; import clock from "./images/clock.svg";
import nike from "./images/nike.svg"; import nike from "./images/nike.svg";
import messageText from "./images/message-text.svg"; import messageText from "./images/message-text.svg";
import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
const CardTrelloDesign = ({ circle, pictures }) => { const CardTrelloDesign = ({ circle, pictures }) => {
return ( return (
@ -75,9 +76,10 @@ const CardTrelloDesign = ({ circle, pictures }) => {
<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">
{pictures.map((pic, index) => ( {/* {pictures.map((pic, index) => (
<img src={pic.image} alt="" className="w-10" /> <img src={pic.image} alt="" className="w-10" />
))} ))} */}
<ProfilePicNextToEachOther num={3} />
</div> </div>
{/* left */} {/* left */}
<div className="flex flex-row items-center gap-x-1"> <div className="flex flex-row items-center gap-x-1">

@ -6,10 +6,10 @@ import profilePic3 from "./images/profilePic3.svg";
import profilePic4 from "./images/profilePic4.svg"; import profilePic4 from "./images/profilePic4.svg";
import profilePic5 from "./images/profilePic5.svg"; import profilePic5 from "./images/profilePic5.svg";
const ProfilePicNextToEachOther = ({ users }) => { const ProfilePicNextToEachOther = ({ users,num }) => {
return ( return (
<div className="flex flex-row"> <div className="flex flex-row">
{users.slice(0, 8).map((user, i) => ( {users.slice(0, num).map((user, i) => (
<img <img
key={i} key={i}
src={user.picture} src={user.picture}
@ -24,6 +24,7 @@ const ProfilePicNextToEachOther = ({ users }) => {
export default ProfilePicNextToEachOther; export default ProfilePicNextToEachOther;
ProfilePicNextToEachOther.defaultProps = { ProfilePicNextToEachOther.defaultProps = {
num: 8,
users: [ users: [
{ {
picture: profilePic1, picture: profilePic1,

Loading…
Cancel
Save