49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
|
import type { SightingType } from "../../types/types";
|
||
|
|
import NumberPlate from "../PlateStack/NumberPlate";
|
||
|
|
import SightingModal from "../SightingModal/SightingModal";
|
||
|
|
import InfoBar from "../SightingsWidget/InfoBar";
|
||
|
|
import { useState } from "react";
|
||
|
|
|
||
|
|
type AlertItemProps = {
|
||
|
|
item: SightingType;
|
||
|
|
};
|
||
|
|
|
||
|
|
const AlertItem = ({ item }: AlertItemProps) => {
|
||
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||
|
|
const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
|
||
|
|
const isNPEDHit = item?.metadata?.npedJSON?.status_code === 404;
|
||
|
|
|
||
|
|
const handleClick = () => {
|
||
|
|
setIsModalOpen(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const closeModal = () => {
|
||
|
|
setIsModalOpen(false);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<InfoBar obj={item} />
|
||
|
|
<div
|
||
|
|
className=" flex flex-row p-4 border border-gray-400 rounded-lg items-center w-full mx-auto justify-between"
|
||
|
|
onClick={handleClick}
|
||
|
|
>
|
||
|
|
{isNPEDHit && <small className="text-red-500">NPED Hit</small>}
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<small>MAKE: {item.make}</small>
|
||
|
|
<small>MODEL: {item.model}</small>
|
||
|
|
<small>COLOUR: {item.color}</small>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<NumberPlate vrm={item.vrm} motion={motionAway} />
|
||
|
|
</div>
|
||
|
|
<SightingModal
|
||
|
|
isSightingModalOpen={isModalOpen}
|
||
|
|
handleClose={closeModal}
|
||
|
|
sighting={item}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default AlertItem;
|