refactor form input fields

components/wizard/contact.tsx

@@ -1,6 +1,6 @@
 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)
@@ -9,77 +9,42 @@ export default function Contact() {
 
   return (
     <>
-      <div className="fsw">
-        <div className="fs">
-          <label className="flabel">
-            Name <Required />
-          </label>
-          <input
-            type="text"
-            name="name"
-            value={name}
-            onChange={onChangeEvent}
-            required
-            className="input-text"
-          />
-        </div>
-      </div>
-      <div className="fsw">
-        <div className="fs">
-          <label className="flabel">
-            E-Mail <Required />
-          </label>
-          <input
-            type="email"
-            name="email"
-            value={email}
-            onChange={onChangeEvent}
-            required
-            className="input-text"
-          />
-        </div>
-      </div>
-      <div className="fsw">
-        <div className="fs">
-          <label className="flabel">
-            Straße <Required />
-          </label>
-          <input
-            type="text"
-            name="street"
-            value={street}
-            onChange={onChangeEvent}
-            required
-            className="input-text"
-          />
-        </div>
-      </div>
-      <div className="fsw">
-        <div className="fs">
-          <label className="flabel">
-            PLZ <Required />
-          </label>
-          <input
-            type="text"
-            name="zip"
-            value={zip}
-            onChange={onChangeEvent}
-            required
-            className="input-text"
-          />
-          <label className="flabel">
-            Stadt <Required />
-          </label>
-          <input
-            type="text"
-            name="city"
-            value={city}
-            onChange={onChangeEvent}
-            required
-            className="input-text"
-          />
-        </div>
-      </div>
+      <Input
+        label="Name"
+        required
+        name="name"
+        value={name}
+        onChange={onChangeEvent}
+      />
+      <Input
+        label="E-Mail"
+        type="email"
+        name="email"
+        value={email}
+        onChange={onChangeEvent}
+        required
+      />
+      <Input
+        label="Straße"
+        name="street"
+        value={street}
+        onChange={onChangeEvent}
+        required
+      />
+      <Input
+        label="PLZ"
+        name="zip"
+        value={zip}
+        onChange={onChangeEvent}
+        required
+      />
+      <Input
+        label="Stadt"
+        name="city"
+        value={city}
+        onChange={onChangeEvent}
+        required
+      />
     </>
   )
 }