initial setup, formik, fields, layout

components/Form/ClientField.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import SelectInput from "./SelectInput"
+import { Utils } from "./Utils"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faClock } from "@fortawesome/free-regular-svg-icons"
+
+// Define a type for your props to improve type-checking
+type ClientFieldProps = {
+    testingCenters: string[]
+    clients: string[]
+}
+
+// Destructure the props in the function parameter
+const ClientField: React.FC<ClientFieldProps> = ({ testingCenters, clients }) => {
+  return (
+    <div className="flex flex-col gap-4">
+      {testingCenters.map((testingCenter) => (
+        <div key={Utils.camelize(testingCenter)} className="flex gap-14 items-center">
+          <span>{testingCenter}</span>
+          <div className="flex gap-2 items-center">
+            <SelectInput name={Utils.camelize(testingCenter)}>
+            <option value="">Select Client</option>
+            {clients.map((option: string) => (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            ))}
+          </SelectInput>
+          <FontAwesomeIcon icon={faClock}/>
+        </div>
+          
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default ClientField