refactored system settings

src/components/SightingModal/SightingModal.tsx

@@ -1,9 +1,11 @@
+import type { SightingType } from "../../types/types";
 import NumberPlate from "../PlateStack/NumberPlate";
 import ModalComponent from "../UI/ModalComponent";
 
 type SightingModalProps = {
   isSightingModalOpen: boolean;
   handleClose: () => void;
+  sighting: SightingType | null;
 };
 
 const SightingModal = ({
@@ -14,16 +16,30 @@ const SightingModal = ({
   const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
   return (
     <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
+      <div>
+        <h2>Sighting Details</h2>
+      </div>
       <button onClick={handleClose}>close</button>
       <div>
-        <h2>{sighting?.vrm}</h2>
-        <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
-        <img
-          src={sighting?.plateUrlInfrared}
-          height={48}
-          alt="infrared patch"
-          className={"opacity-60"}
-        />
+        <div>
+          <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
+        </div>
+        <div>
+          <img
+            src={sighting?.overviewUrl}
+            alt="overview patch"
+            className="h-[50%] w-[50%]"
+          />
+        </div>
+        <div>
+          <img src={sighting?.plateUrlColour} alt="plate patch" height={48} />
+          <img
+            src={sighting?.plateUrlInfrared}
+            height={48}
+            alt="infrared patch"
+            className={"opacity-60"}
+          />
+        </div>
       </div>
     </ModalComponent>
   );