move all wizard specific stuff to components/wizard

components/wizard/reason.js

@@ -0,0 +1,59 @@
+import React, { useContext } from 'react'
+import { WizardContext } from './context/wizardStore'
+import Required from './required'
+
+export default function Contact() {
+  const { state, onChangeEvent } = useContext(WizardContext)
+
+  const { formDataChanged } = state
+  const { purpose, destination, org } = state.formData
+
+  return (
+    <>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">
+            Zweck der Fahrt <Required />
+          </label>
+          <input
+            type="text"
+            name="purpose"
+            value={purpose}
+            onChange={onChangeEvent}
+            required
+            className={`input-text ${
+              formDataChanged.includes('purpose') && 'input-changed'
+            }`}
+          />
+        </div>
+      </div>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">
+            Ziel der Fahrt <Required />
+          </label>
+          <input
+            type="text"
+            name="destination"
+            value={destination}
+            onChange={onChangeEvent}
+            required
+            className="input-text"
+          />
+        </div>
+      </div>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">Verein</label>
+          <input
+            type="text"
+            name="org"
+            value={org}
+            onChange={onChangeEvent}
+            className="input-text"
+          />
+        </div>
+      </div>
+    </>
+  )
+}