added ui for sound settings

2025-09-30 13:25:11 +01:00
parent 3903ff1cb8
commit 673df1a4f4
6 changed files with 226 additions and 0 deletions
--- a/src/components/SettingForms/Sound/SoundUpload.tsx
+++ b/src/components/SettingForms/Sound/SoundUpload.tsx
@@ -0,0 +1,45 @@
+import { Form, Formik } from "formik";
+import FormGroup from "../components/FormGroup";
+import type { SoundUploadValue } from "../../../types/types";
+
+const SoundUpload = () => {
+  const initialValues: SoundUploadValue = {
+    soundFile: null,
+  };
+
+  const handleSubmit = (values: SoundUploadValue) => {
+    console.log(values);
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      {({ setFieldValue }) => (
+        <Form>
+          <FormGroup>
+            <label htmlFor="soundFile">Sighting Sound</label>
+            <input
+              type="file"
+              name="soundFile"
+              id="sightingSoundinput"
+              onChange={(e) => {
+                if (
+                  e.target.files &&
+                  e.target.files[0].type.lastIndexOf(".mp3")
+                )
+                  setFieldValue("sightingSound", e.target.files[0]);
+              }}
+            />
+          </FormGroup>
+          <button
+            type="submit"
+            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+          >
+            Upload
+          </button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default SoundUpload;