add group members link

src/components/Group/Group.tsx

@@ -1,8 +1,9 @@
 import EventCreatorLink from '../EventCreator/EventCreatorLink';
 import EventStream from '../EventStream';
-import GroupSettingsLink from '../GroupSettings/GroupSettingsLink';
+import GroupSettingsLink from './GroupSettingsLink';
 import { IGroup } from '../types';
 import UILink from '../UI/UILink';
+import GroupMembersLink from './GroupMembersLink';
 
 export default function Group({ group }: { group: IGroup }) {
 	return (
@@ -18,10 +19,13 @@ export default function Group({ group }: { group: IGroup }) {
 			<UILink href="/">Home</UILink>
 			<br />
 			<br />
+			<GroupMembersLink group={group} />
+			<br />
 			<GroupSettingsLink group={group} />
 			<br />
 			<EventCreatorLink group={group} />
 			<br />
+
 			{group.events.length > 0 ? (
 				<EventStream events={group.events} />
 			) : (

src/components/Group/GroupMembersLink.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { IGroup } from '../types';
+import UIPressable from '../UI/UIPressable';
+import UISecondaryBox from '../UI/UISecondaryBox';
+
+export default function GroupMembersLink({ group }: { group: IGroup }) {
+	const [open, setOpen] = useState(false);
+
+	const handleClick = () => setOpen(!open);
+
+	return (
+		<>
+			<UIPressable onClick={handleClick}>Members</UIPressable>
+			{open && (
+				<>
+					<br />
+					<UISecondaryBox>
+						<h1>Members</h1>
+						{group.users.map(({ name }) => (
+							<span key={name}>{name}</span>
+						))}
+					</UISecondaryBox>
+				</>
+			)}
+		</>
+	);
+}

src/components/types.ts

@@ -50,6 +50,10 @@ export type IGroup = {
 	id: number;
 	name: string;
 	events: IEvent[];
+	users: {
+		id: number;
+		name: string;
+	}[];
 };
 
 /**