added delete functionality and updated button styles

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>