From 2b201b8c017892b77ea7e6780f5300b902e9f41b Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Tue, 22 Jun 2021 10:40:13 -0400
Subject: [PATCH] add Group component

---
 .gitignore                     |  1 +
 src/components/NewUI/App.tsx   | 16 +++++++++++-----
 src/components/NewUI/Event.tsx | 11 ++++-------
 src/components/NewUI/Group.tsx | 20 ++++++++++++++++++++
 4 files changed, 36 insertions(+), 12 deletions(-)
 create mode 100644 src/components/NewUI/Group.tsx

diff --git a/.gitignore b/.gitignore
index 85e092c..8f6ec93 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 
 .vscode/
+twitter-state.ts
diff --git a/src/components/NewUI/App.tsx b/src/components/NewUI/App.tsx
index 1f5cb60..d611cef 100644
--- a/src/components/NewUI/App.tsx
+++ b/src/components/NewUI/App.tsx
@@ -1,4 +1,5 @@
 import Event from './Event';
+import Group from './Group';
 import UIPrimaryTitle from './UIPrimaryTitle';
 
 export default function App() {
@@ -15,11 +16,16 @@ export default function App() {
 			}}
 		>
 			<UIPrimaryTitle>WheelShare</UIPrimaryTitle>
-			<Event
-				title="TJ Track Regional Meet"
-				group="TJHSST Track and Field"
-				location="Ashburn, Virginia"
-				time="11:00 AM to 2:45 PM"
+			<Group
+				events={[
+					{
+						time: '11:00 AM to 2:45 PM',
+						title: 'TJ Track Regional Meet',
+						group: 'TJHSST Track and Field',
+						location: 'Ashburn, Virginia',
+					},
+				]}
+				name="TJHSST 2022"
 			/>
 			<Event
 				title="End of Year Party"
diff --git a/src/components/NewUI/Event.tsx b/src/components/NewUI/Event.tsx
index d524ba7..47c6550 100644
--- a/src/components/NewUI/Event.tsx
+++ b/src/components/NewUI/Event.tsx
@@ -6,17 +6,14 @@ import UITimeInput from './UITimeInput';
 const green = '#60f760';
 const lightgrey = '#e0e0e0';
 
-export default function Event({
-	title,
-	group,
-	location,
-	time,
-}: {
+export type IEvent = {
 	title: string;
 	group: string;
 	location: string;
 	time: string;
-}) {
+};
+
+export default function Event({ title, group, location, time }: IEvent) {
 	const [needRideThere, setNeedRideThere] = useState(false);
 	const [needRideBack, setNeedRideBack] = useState(false);
 	const [rideTherePickupPlaceID, setRideTherePickupPlaceID] = useState('');
diff --git a/src/components/NewUI/Group.tsx b/src/components/NewUI/Group.tsx
new file mode 100644
index 0000000..9010671
--- /dev/null
+++ b/src/components/NewUI/Group.tsx
@@ -0,0 +1,20 @@
+import Event, { IEvent } from './Event';
+
+export type IGroup = {
+	events: IEvent[];
+	name: string;
+};
+
+export default function Group({ events, name }: IGroup) {
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column' }}>
+			<h1>{name}</h1>
+			<div style={{ display: 'flex', flexDirection: 'column' }}>
+				{events.map((event) => (
+					<Event {...event} key={event.title} />
+				))}
+			</div>
+		</div>
+	);
+	//
+}