rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

member list carpools

Browse Source
This commit is contained in:
Joshua Hsueh 2021-07-12 22:47:17 -04:00
commit 8dcc40fa43
2 changed files with 74 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/Carpool/Carpool.tsx
View File

@ -1,11 +1,17 @@
import EventIcon from '@material-ui/icons/Event';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import MailOutlineIcon from '@material-ui/icons/MailOutline';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import { useState } from 'react';
import { useParams } from 'react-router-dom';
import { ICarpool } from '../types';
import UISecondaryBox from '../UI/UISecondaryBox';
import MemberList from './MemberList';
import UIButton from '../UI/UIButton';
import { lightgrey } from '../colors';
export default function Carpool() {
const id = +useParams<{ id: string }>().id;
@ -52,9 +58,39 @@ export default function Carpool() {
<UISecondaryBox style={{ width: '100%', alignItems: 'center' }}>
{carpool ? (
<>
<h1>{name}</h1>
<h2>{event.name}</h2>
<div style={{ fontSize: '1.5rem', fontWeight: 600 }}>
<h1 style={{ marginBottom: '0rem' }}>{name}</h1>
<h2 style={{ marginBottom: '0rem' }}>{event.name}</h2>
<div
style={{
display: 'flex',
flexDirection: 'row',
margin: '0.5rem 0',
}}
>
<UIButton
style={{
marginRight: '0.25rem',
backgroundColor: lightgrey,
display: 'flex',
alignItems: 'center',
}}
onClick={console.log}
>
<MailOutlineIcon style={{ marginRight: '0.5rem' }} /> 1 request
</UIButton>
<UIButton
style={{
marginLeft: '0.25rem',
backgroundColor: lightgrey,
display: 'flex',
alignItems: 'center',
}}
onClick={console.log}
>
<PersonAddIcon style={{ marginRight: '0.5rem' }} /> Invite
</UIButton>
</div>
<div style={{ fontSize: '1.5rem', fontWeight: 400 }}>
<div
style={{
color: '#303030',
@ -76,7 +112,6 @@ export default function Carpool() {
DAWN - DUSK
</div>
</div>
<h3>Members</h3>
<MemberList members={carpool.members} />
</>
) : (

64
src/components/Carpool/MemberList.tsx
View File

@ -9,35 +9,41 @@ export default function MemberList({
}[];
}) {
return (
<div className="MemberList">
<div style={{ display: 'flex', flexDirection: 'column' }}>
<h3 style={{ marginBlockEnd: '0' }}>Members</h3>
{members.length > 0 ? (
<div>
{members.map((member, index) => {
return index < 2 ? (
<div
className="member"
style={{ display: 'flex', justifyContent: 'space-around' }}
>
{}
<AccountCircleIcon />
<div key={member.id}>{member.name}</div>
</div>
) : (
''
);
})}
{members.length > 2
? members.length - 2 == 1
? members.length - 2 + ' other...'
: members.length - 2 + ' others...'
: ''}{' '}
</div>
) : (
'This carpool has no members.'
)}
</div>
<div
className="MemberList"
style={{
display: 'flex',
flexDirection: 'column',
alignSelf: 'center',
alignItems: 'flex-start',
}}
>
<h3 style={{ marginBlockEnd: '0' }}>Members</h3>
{members.length > 0 ? (
<div>
{members.map((member, index) => {
return index < 2 ? (
<div
className="member"
style={{ display: 'flex', alignItems: 'center' }}
>
{}
<AccountCircleIcon style={{ marginRight: '8px' }} />
<div key={member.id}>{member.name}</div>
</div>
) : (
''
);
})}
{members.length > 2
? members.length - 2 == 1
? members.length - 2 + ' other...'
: members.length - 2 + ' others...'
: ''}{' '}
</div>
) : (
'This carpool has no members.'
)}
</div>
);
}