Merge branch 'main' of https://github.com/myfatemi04/wheelshare-frontend into main

src/components/Carpool/Carpool.tsx

@@ -9,22 +9,11 @@ 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';
 import { getCarpool } from '../api';
 
-function MemberList({ members }: { members: ICarpool['members'] }) {
-	return (
-		<div style={{ display: 'flex', flexDirection: 'column' }}>
-			{members.length > 0
-				? members.map((member) => {
-						return <div key={member.id}>{member.name}</div>;
-				  })
-				: 'This carpool has no members.'}
-		</div>
-	);
-}
-
 export default function Carpool() {
 	const id = +useParams<{ id: string }>().id;
 	const [carpool, setCarpool] = useState<ICarpool | null>(null);

src/components/Carpool/MemberList.tsx

@@ -0,0 +1,49 @@
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+
+export default function MemberList({
+	members,
+}: {
+	members: {
+		id: number;
+		name: string;
+	}[];
+}) {
+	return (
+		<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>
+	);
+}