add grouip creator

src/components/NewUI/App.tsx

@@ -1,5 +1,6 @@
 import EventCreator from './EventCreator';
 import Group from './Group';
+import GroupCreator from './GroupCreator';
 import UIPrimaryTitle from './UIPrimaryTitle';
 
 export default function App() {
@@ -16,6 +17,7 @@ export default function App() {
 			}}
 		>
 			<UIPrimaryTitle>WheelShare</UIPrimaryTitle>
+			<GroupCreator />
 			<EventCreator />
 			<Group
 				events={[

src/components/NewUI/EventCreator.tsx

@@ -30,6 +30,7 @@ export default function EventCreator() {
 
 	return (
 		<UISecondaryBox style={{ width: '100%', boxSizing: 'border-box' }}>
+			<h1 style={{ textAlign: 'center' }}>Create Event</h1>
 			Name
 			<UITextInput value={name} onChangeText={setName} />
 			<br />

src/components/NewUI/GroupCreator.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback, useState } from 'react';
+import UIButton from './UIButton';
+import UISecondaryBox from './UISecondaryBox';
+import UITextInput from './UITextInput';
+
+export default function GroupCreator() {
+	const [name, setName] = useState('');
+	const createGroup = useCallback(() => {
+		fetch('http://localhost:5000/api/groups', {
+			method: 'post',
+			body: JSON.stringify({
+				name,
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+			},
+		});
+	}, [name]);
+
+	return (
+		<UISecondaryBox style={{ width: '100%', boxSizing: 'border-box' }}>
+			<h1 style={{ textAlign: 'center' }}>Create Group</h1>
+			Name
+			<UITextInput onChangeText={setName} value={name} />
+			<UIButton onClick={createGroup}>Create group</UIButton>
+		</UISecondaryBox>
+	);
+}