add a wizard

components/wizard.js

@@ -0,0 +1,55 @@
+import { useContext } from 'react'
+
+import Button from 'react-bootstrap/Button'
+import Form from 'react-bootstrap/Form'
+
+import WizardStore, { WizardContext, ACTIONS } from '../context/wizardStore'
+
+import DateSelect from './dateSelect'
+import Contact from './contact'
+import Driver from './driver'
+
+const STEPS = [
+  { id: 'DATE_SELECT', component: DateSelect },
+  { id: 'CONTACT', component: Contact },
+]
+
+function WizardInternal() {
+  const { state, dispatch } = useContext(WizardContext)
+  const { currentStep } = state
+
+  const isFirstStep = currentStep === 0
+  const isLastStep = currentStep === STEPS.length - 1
+
+  return (
+    <Form>
+      {STEPS.map(({ id, component: Component }, index) => (
+        <>{currentStep === index && <Component />}</>
+      ))}
+      {!isFirstStep && (
+        <Button
+          variant="secondary"
+          onClick={() => dispatch({ type: ACTIONS.PREV_STEP })}
+        >
+          Zurück
+        </Button>
+      )}
+      {!isLastStep && (
+        <Button onClick={() => dispatch({ type: ACTIONS.NEXT_STEP })}>
+          Weiter
+        </Button>
+      )}
+      {isLastStep && (
+        <Button onClick={() => console.log('SEND OFF', state)}>Absenden</Button>
+      )}
+    </Form>
+  )
+}
+
+export default function Wizard() {
+  return (
+    <WizardStore>
+      <WizardInternal />
+    </WizardStore>
+  )
+}