updated forms along with addg tabs

src/components/SettingForms/OverviewText/OverviewTextFields.tsx

@@ -0,0 +1,53 @@
+import { Field, useFormikContext } from "formik";
+import FormGroup from "../components/FormGroup";
+import FormToggle from "../components/FormToggle";
+
+const OverviewTextFields = () => {
+  useFormikContext();
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <FormGroup>
+        <label htmlFor="overviewQuality">Include VRM</label>
+        <FormToggle name="includeVRM" />
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="includeMotion">Include Motion</label>
+        <FormToggle name="includeMotion" />
+      </FormGroup>
+
+      <FormGroup>
+        <label htmlFor="includeCameraName">Include Camera Name</label>
+        <FormToggle name="includeCameraName" />
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="includeTimestamp">Include Timestamp</label>
+        <FormToggle name="includeTimestamp" />
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="">Timestamp Format</label>
+        <Field
+          as="select"
+          name="timestampFormat"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+        >
+          <option value={"UTC"}>UTC</option>
+          <option value={"LOCAL"}>Local</option>
+        </Field>
+      </FormGroup>
+      <FormGroup>
+        <label htmlFor="overlayPosition">Overlay Position</label>
+        <Field
+          as="select"
+          name="overlayPosition"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+        >
+          <option value={"Top"}>Top</option>
+          <option value={"Bottom"}>Bottom</option>
+        </Field>
+      </FormGroup>
+    </div>
+  );
+};
+
+export default OverviewTextFields;