- added volume setting for sighting hits

2025-10-17 16:12:02 +01:00
parent 3eb539fd9d
commit 82b84dc46e
14 changed files with 145 additions and 59 deletions
--- a/src/components/UI/Slider.tsx
+++ b/src/components/UI/Slider.tsx
@@ -0,0 +1,47 @@
+import "rc-slider/assets/index.css";
+import Slider from "rc-slider";
+import { useSoundContext } from "../../context/SoundContext";
+
+const SliderComponent = ({ soundCategory }: { soundCategory: "SIGHTINGVOLUME" | "NPEDVOLUME" | "HOTLISTVOLUME" }) => {
+  const { dispatch, state } = useSoundContext();
+  const volume = soundCategory === "SIGHTINGVOLUME" ? state.sightingVolume : state.NPEDsoundVolume;
+
+  const handleChange = (value: number | number[]) => {
+    const number = typeof value === "number" ? value : value[0];
+    dispatch({ type: soundCategory, payload: number });
+  };
+
+  return (
+    <div className="flex flex-row w-full lg:w-[40%] space-x-5">
+      <Slider
+        min={0}
+        max={1}
+        onChange={handleChange}
+        value={volume}
+        step={0.1}
+        styles={{
+          handle: {
+            width: "1.2rem",
+            height: "1.2rem",
+            marginTop: -7,
+            backgroundColor: "#3b82f6",
+            border: "2px solid white",
+            borderRadius: "50%",
+            boxShadow: "0 0 5px rgba(0, 0, 0, 0.2)",
+          },
+          track: {
+            backgroundColor: "#3b82f6",
+            height: 6,
+          },
+          rail: {
+            backgroundColor: "#e5e7eb",
+            height: 6,
+          },
+        }}
+      />
+      <span>{volume * 10}</span>
+    </div>
+  );
+};
+
+export default SliderComponent;