Add playable sounds

Signed-off-by: Martin Sulikowski <vLuckyyy.biznes@gmail.com>

Author: vLuckyyy

app/notification-generator/NotificationForm.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { NotificationConfig, TabType, FieldType } from "./types";
 import { Tab } from "./form/Tab";
 import { ChatTab } from "./form/ChatTab";
 import { ActionBarTab } from "./form/ActionBarTab";
 import { TitleTab } from "./form/TitleTab";
-import { SoundTab } from "./form/SoundTab";
+import { SoundTab, SoundTabRef } from "./form/SoundTab";
 import { AdvancedTab } from "./form/AdvancedTab";
 import { validateField, validateForm } from "./form/validation";
 
@@ -22,15 +22,14 @@ export function NotificationForm({
 }: NotificationFormProps) {
   const [activeTab, setActiveTab] = useState<TabType>("chat");
   const [errors, setErrors] = useState<Record<string, string>>({});
-
+  const soundTabRef = useRef<SoundTabRef>(null);
 
   const handleChange = useCallback((field: FieldType, value: string | boolean) => {
     setNotification({
       ...notification,
       [field]: value,
     });
 
-
     if (["fadeIn", "stay", "fadeOut", "volume", "pitch", "sound"].includes(field)) {
       const error = validateField(field, value as string);
       setErrors((prev) => ({
@@ -45,8 +44,10 @@ export function NotificationForm({
     }
   }, [notification, setNotification, errors]);
 
-
   const resetForm = useCallback(() => {
+
+    soundTabRef.current?.stopSound();
+    
     setNotification({
       chat: "",
       actionbar: "",
@@ -64,7 +65,6 @@ export function NotificationForm({
     setErrors({});
   }, [setNotification]);
 
-
   const renderTabContent = () => {
     switch (activeTab) {
       case "chat":
@@ -74,7 +74,7 @@ export function NotificationForm({
       case "title":
         return <TitleTab notification={notification} onChange={handleChange} errors={errors} />;
       case "sound":
-        return <SoundTab notification={notification} onChange={handleChange} errors={errors} />;
+        return <SoundTab ref={soundTabRef} notification={notification} onChange={handleChange} errors={errors} />;
       case "advanced":
         return <AdvancedTab notification={notification} onChange={handleChange} />;
       default:
@@ -122,7 +122,7 @@ export function NotificationForm({
         transition={{ duration: 0.2, delay: 0.1 }}
       >
         <motion.button
-          className="rounded-md bg-gray-200 px-4 py-2 text-gray-800 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+          className="rounded-md bg-gray-200 px-4 py-2 text-gray-800 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
           onClick={resetForm}
           whileHover={{ scale: 1.05 }}
           whileTap={{ scale: 0.95 }}

app/notification-generator/SoundInfoBox.tsx

@@ -2,17 +2,10 @@ import { AlertBox } from "../../components/docs/ui/AlertBox";
 
 export function SoundInfoBox() {
   return (
-    <AlertBox type="tip" title="Choose a Minecraft sound">
-      You can find and test Minecraft sounds at{" "}
-      <a
-        href="https://minecraftsounds.com/"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-blue-500 underline"
-      >
-        minecraftsounds.com
-      </a>
-      . Copy the sound name and paste it below.
+    <AlertBox type="tip" title="Minecraft Sounds">
+      <p className="mb-2">
+        Select a sound from the dropdown menu above. You can preview the sound by clicking the play button.
+      </p>
     </AlertBox>
   );
 }

app/notification-generator/form/SliderField.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { motion } from "framer-motion";
+
+interface SliderFieldProps {
+  label: string;
+  name: string;
+  value: string;
+  onChange: (name: string, value: string) => void;
+  min: number;
+  max: number;
+  step: number;
+  error?: string;
+}
+
+export const SliderField = ({
+  label,
+  name,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  error,
+}: SliderFieldProps) => {
+  const [sliderValue, setSliderValue] = useState<number>(
+    value ? parseFloat(value) : (min + max) / 2
+  );
+
+
+  useEffect(() => {
+    if (value) {
+      const parsedValue = parseFloat(value);
+
+      const boundedValue = Math.max(min, Math.min(max, parsedValue));
+      setSliderValue(boundedValue);
+    }
+  }, [value, min, max]);
+
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(e.target.value);
+    setSliderValue(newValue);
+    onChange(name, newValue.toFixed(2));
+  }, [name, onChange]);
+
+
+  const gradientPercentage = ((sliderValue - min) / (max - min)) * 100;
+
+  return (
+    <div className="mb-4">
+      <div className="flex items-center justify-between">
+        <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+          {label}
+        </label>
+        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          {sliderValue.toFixed(2)}
+        </span>
+      </div>
+      <div className="flex items-center">
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={sliderValue}
+          onChange={handleChange}
+          className="h-2 w-full appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
+          style={{
+            background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${gradientPercentage}%, #e5e7eb ${gradientPercentage}%, #e5e7eb 100%)`,
+          }}
+        />
+      </div>
+      {error && (
+        <motion.p 
+          className="mt-1 text-xs text-red-500 dark:text-red-400"
+          initial={{ opacity: 0, y: -5 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          {error}
+        </motion.p>
+      )}
+    </div>
+  );
+};