diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
index f0a0aea..f0ef167 100644
--- a/src/components/Group/Group.tsx
+++ b/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 }) {
Home
+
+
+
{group.events.length > 0 ? (
) : (
diff --git a/src/components/Group/GroupMembersLink.tsx b/src/components/Group/GroupMembersLink.tsx
new file mode 100644
index 0000000..4cd2b6e
--- /dev/null
+++ b/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 (
+ <>
+ Members
+ {open && (
+ <>
+
+
+ Members
+ {group.users.map(({ name }) => (
+ {name}
+ ))}
+
+ >
+ )}
+ >
+ );
+}
diff --git a/src/components/GroupSettings/GroupSettings.tsx b/src/components/Group/GroupSettings.tsx
similarity index 100%
rename from src/components/GroupSettings/GroupSettings.tsx
rename to src/components/Group/GroupSettings.tsx
diff --git a/src/components/GroupSettings/GroupSettingsLink.tsx b/src/components/Group/GroupSettingsLink.tsx
similarity index 100%
rename from src/components/GroupSettings/GroupSettingsLink.tsx
rename to src/components/Group/GroupSettingsLink.tsx
diff --git a/src/components/types.ts b/src/components/types.ts
index 3bb24cf..afa9c89 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -50,6 +50,10 @@ export type IGroup = {
id: number;
name: string;
events: IEvent[];
+ users: {
+ id: number;
+ name: string;
+ }[];
};
/**