65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
import type { DecodeReading } from "../../../../../types/types";
|
|
|
|
type PlatePatchModalContentProps = {
|
|
currentPatch: DecodeReading | null;
|
|
direction?: "entry" | "exit";
|
|
};
|
|
|
|
const PlatePatchModalContent = ({ currentPatch, direction }: PlatePatchModalContentProps) => {
|
|
const imageSrc = `data:image/png;base64,${currentPatch?.plate || ""}`;
|
|
const imageUrl = currentPatch ? imageSrc : "";
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between border-b border-gray-600 pb-3">
|
|
<h2
|
|
className={`font-mono font-bold text-3xl tracking-wide
|
|
${direction === "entry" ? "text-blue-400" : "text-red-400"}`}
|
|
>
|
|
{currentPatch?.vrm}
|
|
</h2>
|
|
<span
|
|
className={`px-3 py-1 rounded-full text-xs font-semibold uppercase
|
|
${direction === "entry" ? "bg-blue-500/20 text-blue-400" : "bg-red-500/20 text-red-400"}`}
|
|
>
|
|
{direction === "entry" ? "Entry" : "Exit"}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="border border-gray-600 rounded-2xl">
|
|
<div className="flex bg-gray-800/50 rounded-lg p-4">
|
|
<img
|
|
src={imageUrl}
|
|
alt={`${direction === "entry" ? "Entry" : "Exit"} Image for ${currentPatch?.vrm || "N/A"}`}
|
|
className="rounded-lg border border-gray-600 max-w-full h-auto shadow-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4 bg-gray-800/30 rounded-lg p-4">
|
|
<div className="space-y-1">
|
|
<p className="text-gray-400 text-xs uppercase tracking-wider">Bay ID</p>
|
|
<p className="text-gray-200 font-semibold text-lg">{currentPatch?.laneID || "N/A"}</p>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<p className="text-gray-400 text-xs uppercase tracking-wider">Seen Count</p>
|
|
<p className="text-gray-200 font-semibold text-lg">{currentPatch?.seenCount || "N/A"}</p>
|
|
</div>
|
|
|
|
<div className="space-y-1 col-span-2">
|
|
<p className="text-gray-400 text-xs uppercase tracking-wider">First Seen</p>
|
|
<p className="text-gray-300 text-sm">{currentPatch?.firstSeenTimeHumane || "N/A"}</p>
|
|
</div>
|
|
|
|
<div className="space-y-1 col-span-2">
|
|
<p className="text-gray-400 text-xs uppercase tracking-wider">Last Seen</p>
|
|
<p className="text-gray-300 text-sm">{currentPatch?.lastSeenTimeHumane || "N/A"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PlatePatchModalContent;
|