added delete functionality and updated button styles

src/components/HistoryList/AlertItem.tsx

@@ -4,6 +4,10 @@ import SightingModal from "../SightingModal/SightingModal";
 import InfoBar from "../SightingsWidget/InfoBar";
 import { useState } from "react";
 import HotListImg from "/Hotlist_Hit.svg";
+import { useAlertHitContext } from "../../context/AlertHitContext";
+import NPED_CAT_A from "/NPED_Cat_A.svg";
+import NPED_CAT_B from "/NPED_Cat_B.svg";
+import NPED_CAT_C from "/NPED_Cat_C.svg";
 
 type AlertItemProps = {
   item: SightingType;
@@ -11,8 +15,12 @@ type AlertItemProps = {
 
 const AlertItem = ({ item }: AlertItemProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const { dispatch } = useAlertHitContext();
   const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
   const isHotListHit = item?.metadata?.hotlistMatches?.Hotlist0 === true;
+  const isNPEDHitA = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
+  const isNPEDHitB = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
+  const isNPEDHitC = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
 
   const handleClick = () => {
     setIsModalOpen(true);
@@ -21,35 +29,63 @@ const AlertItem = ({ item }: AlertItemProps) => {
   const closeModal = () => {
     setIsModalOpen(false);
   };
+
+  const handleDelete = () => {
+    dispatch({ type: "REMOVE", payload: item });
+  };
   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}
-      >
-        {isHotListHit && (
-          <img
-            src={HotListImg}
-            alt="hotlistHit"
-            className="h-20 object-contain rounded-md"
-          />
-        )}
+    <div className="flex flex-col w-full">
+      <div className="border border-gray-400 rounded-lg items-center py-1">
+        <InfoBar obj={item} />
+        <div
+          className=" flex flex-row p-4  w-full mx-auto justify-between"
+          onClick={handleClick}
+        >
+          {isHotListHit && (
+            <img
+              src={HotListImg}
+              alt="hotlistHit"
+              className="h-20 object-contain rounded-md"
+            />
+          )}
+          {isNPEDHitA && (
+            <img
+              src={NPED_CAT_A}
+              alt="hotlistHit"
+              className="h-20 object-contain rounded-md"
+            />
+          )}
+          {isNPEDHitB && (
+            <img
+              src={NPED_CAT_B}
+              alt="hotlistHit"
+              className="h-20 object-contain rounded-md"
+            />
+          )}
+          {isNPEDHitC && (
+            <img
+              src={NPED_CAT_C}
+              alt="hotlistHit"
+              className="h-20 object-contain rounded-md"
+            />
+          )}
 
-        <div className="flex flex-col">
-          <small>MAKE: {item.make}</small>
-          <small>MODEL: {item.model}</small>
-          <small>COLOUR: {item.color}</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>
-
-        <NumberPlate vrm={item.vrm} motion={motionAway} />
+        <SightingModal
+          isSightingModalOpen={isModalOpen}
+          handleClose={closeModal}
+          sighting={item}
+          onDelete={handleDelete}
+        />
       </div>
-      <SightingModal
-        isSightingModalOpen={isModalOpen}
-        handleClose={closeModal}
-        sighting={item}
-      />
-    </>
+    </div>
   );
 };
 

src/components/HistoryList/HistoryList.tsx

@@ -1,18 +1,30 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useAlertHitContext } from "../../context/AlertHitContext";
+import type { SightingType } from "../../types/types";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import AlertItem from "./AlertItem";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
 
 const HistoryList = () => {
-  const { state } = useAlertHitContext();
+  const { state, dispatch } = useAlertHitContext();
 
+  const handleDeleteClick = (alertItem: SightingType) =>
+    dispatch({ type: "REMOVE", payload: alertItem });
   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} />
+            <div key={index} className="flex flex-row space-x-2">
+              <AlertItem item={alertItem} />
+              <button onClick={() => handleDeleteClick(alertItem)}>
+                <div className="p-4">
+                  <FontAwesomeIcon icon={faTrash} size="2x" />
+                </div>
+              </button>
+            </div>
           ))
         ) : (
           <p>No Alert results</p>