added forms and refactored component names

src/components/CameraSettings/CameraSettingFields.tsx

@@ -1,5 +1,136 @@
+import { Formik, Field, Form } from "formik";
+import type {
+  CameraSettingErrorValues,
+  CameraSettingValues,
+} from "../../types/types";
+
 const CameraSettingFields = () => {
-  return <div>CameraSettingFields</div>;
+  const initialValues = {
+    friendlyName: "",
+    cameraAddress: "",
+    userName: "",
+    password: "",
+    setupCamera: 1,
+  };
+  const validateValues = (values: CameraSettingValues) => {
+    const errors: CameraSettingErrorValues = {};
+
+    if (!values.friendlyName) errors.friendlyName = "Required";
+    if (!values.cameraAddress) errors.cameraAddress = "Required";
+    if (!values.userName) errors.userName = "Required";
+    if (!values.password) errors.password = "Required";
+    console.log(errors);
+    return errors;
+  };
+
+  const handleSubmit = (values: CameraSettingValues) => {
+    // post values to endpoint
+    console.log(values);
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      validate={validateValues}
+      validateOnChange={false}
+    >
+      {({ errors }) => {
+        return (
+          <Form className="flex flex-col space-y-4 p-2">
+            <div className="flex flex-col space-y-2">
+              <label htmlFor="friendlyName" className="relative">
+                Friendly Name
+              </label>
+              {errors.friendlyName && (
+                <small className="absolute right-0 text-red-500">
+                  {errors?.friendlyName}
+                </small>
+              )}
+              <Field
+                name={"friendlyName"}
+                type="text"
+                className="p-2 border border-gray-400 rounded-lg"
+                placeholder="Enter camera name"
+              />
+            </div>
+            <div className="flex flex-col">
+              <label htmlFor="setupCamera" className="relative">
+                Setup Camera
+              </label>
+
+              <Field
+                as="select"
+                name="setupCamera"
+                className="p-2 border border-gray-400 rounded-lg text-white"
+              >
+                <option value={1} className="bg-[#253445]">
+                  1
+                </option>
+                <option value={2} className="bg-[#253445]">
+                  2
+                </option>
+                <option value={3} className="bg-[#253445]">
+                  3
+                </option>
+                <option value={4} className="bg-[#253445]">
+                  4
+                </option>
+              </Field>
+            </div>
+            <div className="flex flex-col">
+              <label htmlFor="cameraAddress">Camera Address</label>
+              {errors.cameraAddress && (
+                <small className="absolute right-0 text-red-500">
+                  {errors?.cameraAddress}
+                </small>
+              )}
+              <Field
+                name={"cameraAddress"}
+                type="text"
+                className="p-2 border border-gray-400 rounded-lg"
+                placeholder="123, London Road..."
+              />
+            </div>
+            <div className="flex flex-col">
+              <label htmlFor="userName">User Name</label>
+              {errors.userName && (
+                <small className="absolute right-0 text-red-500">
+                  {errors?.userName}
+                </small>
+              )}
+              <Field
+                name={"userName"}
+                type="text"
+                className="p-2 border border-gray-400 rounded-lg"
+                placeholder="Enter user name"
+              />
+            </div>
+            <div className="flex flex-col">
+              <label htmlFor="password">Password</label>
+              {errors.password && (
+                <small className="absolute right-0 text-red-500">
+                  {errors?.password}
+                </small>
+              )}
+              <Field
+                name={"password"}
+                type="password"
+                className="p-2 border border-gray-400 rounded-lg"
+                placeholder="Enter password"
+              />
+            </div>
+            <button
+              type="submit"
+              className="bg-blue-800 rounded-lg p-2  mx-auto"
+            >
+              Save settings
+            </button>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
 };
 
 export default CameraSettingFields;