62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
import { useCameraSettingsContext } from "../../../../../app/context/CameraSettingsContext";
|
|
import type { SightingType } from "../../../../../utils/types";
|
|
import { timeAgo } from "../../../../../utils/utils";
|
|
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 };
|
|
const timeStamp = timeAgo(sighting?.timeStampMillis ?? null);
|
|
|
|
return (
|
|
<div>
|
|
{sighting ? (
|
|
<>
|
|
<div className="flex flex-row items-center justify-between mb-6 border-b border-gray-600">
|
|
<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 border p-4 rounded-lg border-gray-600">
|
|
<div>
|
|
<p className="text-md text-gray-300">VRM</p>
|
|
<p className="text-lg font-semibold">{sighting.vrm}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-md text-gray-300">Seen</p>
|
|
<p className="text-md">{timeStamp}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-md text-gray-300">Timestamp</p>
|
|
<p className="text-md">{new Date(sighting.timeStampMillis).toLocaleString()}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-md text-gray-300">Motion</p>
|
|
<p className="text-lg font-semibold">{sighting.motion}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-md text-gray-300">Radar Speed</p>
|
|
<p className="text-lg font-semibold">{sighting.radarSpeed} mph</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<p className="text-gray-300">No sighting data available.</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SightingModalContent;
|