#96 - ContactForm now uses alert component instead of static declaration.

Author: OudomMunint

src/components/Contact.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
-//import AlertComponent from "./AlertComponent";
+import AlertComponent from "./AlertComponent";
 
 function ContactForm() {
   const isDevelopment = process.env.NODE_ENV === "development";
@@ -8,13 +8,6 @@ function ContactForm() {
   const [message, setMessage] = useState("");
   const [animateAlert, setAnimateAlert] = useState(false);
 
-  const hideAlert = () => {
-    const alertElement = document.querySelector(".alert-container");
-    if (alertElement) {
-      alertElement.classList.add("hidden");
-    }
-  };
-
   useEffect(() => {
     const timer = setTimeout(() => {
       setAnimateAlert(true);
@@ -70,24 +63,15 @@ function ContactForm() {
       <div className="formFlex">
 
         {/* Alert Message */}
-          <div className={`alert-container ${animateAlert ? "" : "hidden"}`} id="alert">
-            <p style={{ margin: "0" }}>
+          <AlertComponent message={
+            <>
               This website serves as a showcase of my development work. The source code is hosted on GitHub and deployed via my personal Netlify account.
               Therefore, all emails sent through this form will be directed to me. For inquiries related to
               <strong className="purple"> Studio Zed</strong>, please contact
               <a href="https://www.newcastle.edu.au/profile/simone-ocallaghan"> Dr. Simone O'Callaghan</a>.
-            </p>
-            <button onClick={hideAlert}
-              style={{
-                backgroundColor: "transparent",
-                border: "none",
-                color: "#721c24",
-                cursor: "pointer",
-                float: "right",
-              }}>
-              &#x2715;
-            </button>
-          </div>
+            </>
+          }
+          animateAlert={animateAlert} />
 
         {/* Form */}
         <div className="form">