refactor form input fields

components/wizard/reason.tsx

@@ -1,59 +1,29 @@
 import React, { useContext } from 'react'
 import { WizardContext } from './context/wizardStore'
-import Required from './required'
+import Input from './input'
 
 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>
+      <Input
+        label="Zweck der Fahrt"
+        name="purpose"
+        value={purpose}
+        onChange={onChangeEvent}
+        required
+      />
+      <Input
+        label="Ziel der Fahrt"
+        name="destination"
+        value={destination}
+        onChange={onChangeEvent}
+        required
+      />
+      <Input label="Verein" name="org" value={org} onChange={onChangeEvent} />
     </>
   )
 }