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;

src/components/HistoryList/HistoryList.tsx

@@ -0,0 +1,25 @@
+import { useAlertHitContext } from "../../context/AlertHitContext";
+import Card from "../UI/Card";
+import CardHeader from "../UI/CardHeader";
+import AlertItem from "./AlertItem";
+
+const HistoryList = () => {
+  const { state } = useAlertHitContext();
+  console.log(state);
+  return (
+    <Card className="h-100">
+      <CardHeader title="Alert History" />
+      <div className="flex flex-col gap-1">
+        {state?.alertList?.length >= 0 ? (
+          state?.alertList?.map((alertItem, index) => (
+            <AlertItem key={index} item={alertItem} />
+          ))
+        ) : (
+          <p>No Search results</p>
+        )}
+      </div>
+    </Card>
+  );
+};
+
+export default HistoryList;