got to a good point with sighting modal, want to do cleanup

src/components/HistoryList/AlertItem.tsx

@@ -0,0 +1,48 @@
+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;