added sounds, updated nped config and tweaks + code quality improvements

src/components/UI/CardHeader.tsx

@@ -1,18 +1,27 @@
 import type { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
+import NumberPlate from "../PlateStack/NumberPlate";
+import type { SightingType } from "../../types/types";
 
 type CameraOverviewHeaderProps = {
   title: string;
   icon?: IconProp;
   img?: string;
+  sighting?: SightingType | null;
 };
 
-const CardHeader = ({ title, icon, img }: CameraOverviewHeaderProps) => {
+const CardHeader = ({
+  title,
+  icon,
+  img,
+  sighting,
+}: CameraOverviewHeaderProps) => {
+  // console.log(sighting?.debug.toLowerCase());
   return (
     <div
       className={clsx(
-        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6 relative"
+        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6 relative justify-between"
       )}
     >
       <div className="flex items-center space-x-2">
@@ -22,6 +31,7 @@ const CardHeader = ({ title, icon, img }: CameraOverviewHeaderProps) => {
       {img && (
         <img src={img} alt="Logo" width={100} height={50} className="ml-auto" />
       )}
+      {sighting?.vrm && <NumberPlate vrm={sighting.vrm} motion={false} />}
     </div>
   );
 };

src/components/UI/Header.tsx

@@ -10,6 +10,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import type { VersionFieldType } from "../../types/types";
 import { useEffect, useState } from "react";
+import SoundBtn from "./SoundBtn";
 
 async function fetchVersions(
   signal?: AbortSignal
@@ -120,6 +121,7 @@ export default function Header() {
               size="2x"
             />
           </Link>
+          <SoundBtn />
           <Link to={"/system-settings"}>
             <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
           </Link>

src/components/UI/SoundBtn.tsx

@@ -0,0 +1,22 @@
+import { faVolumeHigh, faVolumeXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useSoundEnabled } from "react-sounds";
+
+const SoundBtn = () => {
+  const [enabled, setEnabled] = useSoundEnabled();
+
+  const handleClick = () => {
+    setEnabled(!enabled);
+  };
+
+  return (
+    <button onClick={handleClick}>
+      <FontAwesomeIcon
+        icon={enabled ? faVolumeHigh : faVolumeXmark}
+        size="2x"
+      />
+    </button>
+  );
+};
+
+export default SoundBtn;