add Group component

.gitignore

@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 
 .vscode/
+twitter-state.ts

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"

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('');

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>
+	);
+	//
+}