layout event form

src/common/components/text/NumberedText.jsx

@@ -0,0 +1,11 @@
+import { Flex, Text } from '@chakra-ui/layout';
+import styles from './NumberedText.module.css';
+
+export default function NumberedText({ number = 1, text = '' }) {
+  return (
+    <Flex>
+      <div className={styles.stylednumber}>{number}</div>
+      <Text>{text}</Text>
+    </Flex>
+  );
+}

src/common/components/text/NumberedText.module.css

@@ -0,0 +1,12 @@
+.stylednumber {
+  display: inline;
+  text-align: center;
+  color: white;
+  font-weight: 600;
+
+  background-color: #319795;
+  width: 1.5em;
+  border-radius: 1em;
+
+  margin-right: 0.5em;
+}

src/common/input/SingleTimeInput.jsx

@@ -0,0 +1,27 @@
+import { Text } from '@chakra-ui/layout';
+import {
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+} from '@chakra-ui/number-input';
+import styles from './TimeInput.module.css';
+
+export default function SingleTimeInput(props) {
+  return (
+    <div className={styles.container}>
+      <Text className={styles.label}>{props.label}</Text>
+      <Text className={styles.label}>min</Text>
+      <div className={styles.timeInput}>
+        <NumberInput min={0} max={60} maxW={20} allowMouseWheel>
+          <NumberInputField />
+          <NumberInputStepper>
+            <NumberIncrementStepper />
+            <NumberDecrementStepper />
+          </NumberInputStepper>
+        </NumberInput>
+      </div>
+    </div>
+  );
+}

src/common/input/TimeInput.jsx

@@ -0,0 +1,35 @@
+import { Text } from '@chakra-ui/layout';
+import {
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+} from '@chakra-ui/number-input';
+import styles from './TimeInput.module.css';
+
+export default function TimeInput(props) {
+  return (
+    <div className={styles.container}>
+      <Text className={styles.label}>{props.label}</Text>
+      <Text className={styles.label}>hour / min</Text>
+      <div className={styles.timeInput}>
+        <NumberInput min={0} max={24} maxW={20} allowMouseWheel>
+          <NumberInputField />
+          <NumberInputStepper>
+            <NumberIncrementStepper />
+            <NumberDecrementStepper />
+          </NumberInputStepper>
+        </NumberInput>
+        <div className={styles.spacer} />
+        <NumberInput min={0} max={59} maxW={20} allowMouseWheel>
+          <NumberInputField />
+          <NumberInputStepper>
+            <NumberIncrementStepper />
+            <NumberDecrementStepper />
+          </NumberInputStepper>
+        </NumberInput>
+      </div>
+    </div>
+  );
+}

src/common/input/TimeInput.module.css

@@ -0,0 +1,17 @@
+.container {
+  padding-right: 1em;
+  padding-top: 2em;
+}
+
+.timeInput {
+  display: flex;
+}
+
+.label {
+  font-size: 0.9em;
+  color: #666;
+}
+
+.spacer {
+  width: 0.25em
+}

src/features/form/EventForm.jsx

@@ -0,0 +1,43 @@
+import { Button } from '@chakra-ui/button';
+import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
+import { Stack } from '@chakra-ui/layout';
+import { Spacer } from '@chakra-ui/layout';
+import { Text } from '@chakra-ui/layout';
+import SingleTimeInput from '../../common/input/SingleTimeInput';
+import TimeInput from '../../common/input/TimeInput';
+import styles from './EventForm.module.css';
+
+export default function EventForm(props) {
+  return (
+    <div>
+      <Text className={styles.label}>Event Title </Text>
+      <Editable defaultValue='Event Title'>
+        <EditablePreview />
+        <EditableInput />
+      </Editable>
+
+      <Text className={styles.label}>Event Subtitle </Text>
+      <Editable defaultValue='Event Subtitle'>
+        <EditablePreview />
+        <EditableInput />
+      </Editable>
+
+      <Text className={styles.label}>Presenter Name </Text>
+      <Editable defaultValue='Presenter Name'>
+        <EditablePreview />
+        <EditableInput />
+      </Editable>
+
+      <div className={styles.timings}>
+        <TimeInput label='Scheduled Start' />
+        <TimeInput label='Scheduled End' />
+        <SingleTimeInput label='Timer' />
+      </div>
+
+      <div className={styles.buttons}>
+        <Button variant='outline'>Cancel</Button>
+        <Button colorScheme='teal'>Save</Button>
+      </div>
+    </div>
+  );
+}

src/features/form/EventForm.module.css

@@ -0,0 +1,23 @@
+.label {
+  padding-top: 1.5em;
+  font-size: 0.9em;
+  color: #666;
+}
+
+.timings {
+  display: flex;
+  justify-content: space-between;
+}
+
+.timeInput {
+  display: flex;
+  gap: 10px;
+}
+
+.buttons {
+  padding-top: 3em;
+  bottom: 10px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 1em;
+}