feat: add modal component for sighting details with content display

- Implemented ModalComponent for reusable modal functionality.
- Created SightingItemModal to manage modal state and display sighting details.
- Developed SightingModalContent to render sighting information including video feed and metadata.

src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx

@@ -0,0 +1,50 @@
+import { useCameraSettingsContext } from "../../../../../app/context/CameraSettingsContext";
+import type { SightingType } from "../../../../../utils/types";
+import NumberPlate from "../../platePatch/NumberPlate";
+import VideoFeed from "../../videoFeed/VideoFeed";
+
+type SightingModalContentProps = {
+  sighting: SightingType | null;
+};
+
+const SightingModalContent = ({ sighting }: SightingModalContentProps) => {
+  const { state: cameraSettings } = useCameraSettingsContext();
+  const size = cameraSettings.imageSize;
+  const modalImageSize = { width: size.width / 1.5, height: size.height / 1.5 };
+  return (
+    <div>
+      {sighting ? (
+        <>
+          <div className="flex flex-row items-center justify-between mb-6">
+            <h2 className="text-2xl font-bold">Sighting Details</h2>
+            <NumberPlate vrm={sighting.vrm} motion={sighting.motion.toLowerCase() === "away"} size="md" />
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2">
+              <VideoFeed mostRecentSighting={sighting} isLoading={false} size={modalImageSize} isModal={true} />
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <p className="text-sm text-gray-600">VRM</p>
+                <p className="text-lg font-semibold">{sighting.vrm}</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Timestamp</p>
+                <p className="text-sm">{new Date(sighting.timeStampMillis).toLocaleString()}</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Motion</p>
+                <p className="text-lg font-semibold">{sighting.motion}</p>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <p>No sighting data available.</p>
+      )}
+    </div>
+  );
+};
+
+export default SightingModalContent;