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>
   );
 };