diff --git a/src/components/NewUI/EventCreatorLink.tsx b/src/components/NewUI/EventCreatorLink.tsx
new file mode 100644
index 0000000..790dc50
--- /dev/null
+++ b/src/components/NewUI/EventCreatorLink.tsx
@@ -0,0 +1,26 @@
+import { useCallback, useState } from 'react';
+import EventCreator from './EventCreator';
+import { IGroup } from './Group';
+
+export default function EventCreatorLink({ group }: { group: IGroup }) {
+ const [open, setOpen] = useState(false);
+ const toggle = useCallback(() => {
+ setOpen((open) => !open);
+ }, []);
+
+ return (
+
+
+ Create Event
+
+ {open &&
}
+
+ );
+}
diff --git a/src/components/NewUI/EventStream.tsx b/src/components/NewUI/EventStream.tsx
index 3c180a8..e910f1c 100644
--- a/src/components/NewUI/EventStream.tsx
+++ b/src/components/NewUI/EventStream.tsx
@@ -3,9 +3,13 @@ import Event, { IEvent } from './Event';
export default function EventStream({ events }: { events: IEvent[] }) {
return (
- {events.map((event) => (
-
- ))}
+ {events && events.length > 0 ? (
+ events.map((event) => )
+ ) : (
+
+ There are no events yet. Click 'create event' above to add one!
+
+ )}
);
}
diff --git a/src/components/NewUI/Group.tsx b/src/components/NewUI/Group.tsx
index a04a72f..da4382f 100644
--- a/src/components/NewUI/Group.tsx
+++ b/src/components/NewUI/Group.tsx
@@ -2,8 +2,9 @@ import { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import { Link } from 'react-router-dom';
import { IEvent } from './Event';
-import EventCreator from './EventCreator';
+import EventCreatorLink from './EventCreatorLink';
import EventStream from './EventStream';
+import GroupSettingsLink from './GroupSettingsLink';
export type IGroup = {
id: number;
@@ -44,6 +45,8 @@ export default function Group() {
const { name } = group;
+ console.log({ events });
+
return (
{name}
-
+
+
);
diff --git a/src/components/NewUI/GroupSettingsLink.tsx b/src/components/NewUI/GroupSettingsLink.tsx
new file mode 100644
index 0000000..2fad6cf
--- /dev/null
+++ b/src/components/NewUI/GroupSettingsLink.tsx
@@ -0,0 +1,30 @@
+import { useCallback, useState } from 'react';
+import { IGroup } from './Group';
+import UISecondaryBox from './UISecondaryBox';
+
+export default function GroupSettingsLink({ group }: { group: IGroup }) {
+ const [open, setOpen] = useState(false);
+ const toggle = useCallback(() => {
+ setOpen((open) => !open);
+ }, []);
+
+ return (
+
+
+ Settings
+
+ {open && (
+
+ Settings
+
+ )}
+
+ );
+}
diff --git a/src/components/NewUI/UILink.tsx b/src/components/NewUI/UILink.tsx
new file mode 100644
index 0000000..cc0cf22
--- /dev/null
+++ b/src/components/NewUI/UILink.tsx
@@ -0,0 +1,28 @@
+import { CSSProperties, ReactNode, useMemo } from 'react';
+import { Link } from 'react-router-dom';
+
+const baseStyle: CSSProperties = {
+ textDecoration: 'none',
+ cursor: 'pointer',
+ userSelect: 'none',
+};
+
+export default function UILink({
+ href,
+ style,
+ children,
+}: {
+ href: string;
+ style?: CSSProperties;
+ children: ReactNode;
+}) {
+ const computedStyle = useMemo(() => {
+ return !style ? baseStyle : { ...baseStyle, ...style };
+ }, [style]);
+
+ return (
+
+ {children}
+
+ );
+}