add clean group ui

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 (
+		<div>
+			<div
+				style={{
+					cursor: 'pointer',
+					userSelect: 'none',
+					marginBottom: '1rem',
+				}}
+				onClick={toggle}
+			>
+				Create Event
+			</div>
+			{open && <EventCreator group={group} />}
+		</div>
+	);
+}

src/components/NewUI/EventStream.tsx

@@ -3,9 +3,13 @@ import Event, { IEvent } from './Event';
 export default function EventStream({ events }: { events: IEvent[] }) {
 	return (
 		<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
-			{events.map((event) => (
+			{events && events.length > 0 ? (
-				<Event {...event} key={event.title} />
+				events.map((event) => <Event {...event} key={event.title} />)
-			))}
+			) : (
+				<span>
+					There are no events yet. Click 'create event' above to add one!
+				</span>
+			)}
 		</div>
 	);
 }

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 (
 		<div
 			style={{
@@ -54,7 +57,8 @@ export default function Group() {
 			}}
 		>
 			<h1>{name}</h1>
-			<EventCreator group={group} />
+			<GroupSettingsLink group={group} />
+			<EventCreatorLink group={group} />
 			<EventStream events={events} />
 		</div>
 	);

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 (
+		<div>
+			<div
+				style={{
+					cursor: 'pointer',
+					userSelect: 'none',
+					marginBottom: '1rem',
+				}}
+				onClick={toggle}
+			>
+				Settings
+			</div>
+			{open && (
+				<UISecondaryBox>
+					<h1>Settings</h1>
+				</UISecondaryBox>
+			)}
+		</div>
+	);
+}

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 (
+		<Link to={href} style={computedStyle}>
+			{children}
+		</Link>
+	);
+}