From f7eb0ebd261b2af9f06c997fb2c2d9f579595c28 Mon Sep 17 00:00:00 2001
From: Dev <dgajjar432@gmail.com>
Date: Mon, 22 Jul 2024 19:24:27 +0530
Subject: [PATCH] contact page notification

---
 frontend/package-lock.json         |  1 -
 frontend/src/App.css               | 22 ++++++++++-----
 frontend/src/Component/Contact.jsx | 43 ++++++++++++++++++++++++++----
 3 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ef4aa198..6634d473 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16878,7 +16878,6 @@
       "version": "10.0.5",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
       "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
-      "license": "MIT",
       "dependencies": {
         "clsx": "^2.1.0"
       },
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4ada6601..5a45d6a8 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,9 +1,19 @@
-*{
-  cursor:none;
+* {
+  cursor: none;
 }
 
 .sidebar-content {
-    padding: 10px;
-    cursor: none;
-    transition: background-color 0.2s;
-  }
\ No newline at end of file
+  padding: 10px;
+  cursor: none;
+  transition: background-color 0.2s;
+}
+
+.Toastify__toast-container {
+  color: #000;
+}
+
+.Toastify__toast {
+  font-size: 18px;
+  color: black;
+  background-color: rgb(165, 57, 197);
+}
diff --git a/frontend/src/Component/Contact.jsx b/frontend/src/Component/Contact.jsx
index 73f54731..a7bd0bed 100644
--- a/frontend/src/Component/Contact.jsx
+++ b/frontend/src/Component/Contact.jsx
@@ -1,12 +1,14 @@
-import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-  faLinkedin,
+  faFacebook,
   faGithub,
+  faLinkedin,
   faTwitter,
-  faFacebook,
 } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Lottie from "lottie-react";
+import React, { useState } from "react";
+import { Bounce, ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import animationData from "../lottie/contact.json";
 import "../style/Contact.css";
 
@@ -22,6 +24,24 @@ const Contact = () => {
     setIsValid(emailRegex.test(value));
   };
 
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (isValid && email) {
+      toast("✅ Sent Successfully!", {
+        position: "top-center",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: false,
+        draggable: true,
+        progress: undefined,
+        theme: "light",
+        transition: Bounce,
+        closeButton: true,
+      });
+    }
+  };
+
   return (
     <div className="outer-contact">
       <div className="contact-container">
@@ -38,7 +58,7 @@ const Contact = () => {
             <p className="contact-description">
               Please fill out the form below to get in touch with us.
             </p>
-            <form className="contact-form">
+            <form className="contact-form" onSubmit={handleSubmit}>
               <div className="form-group">
                 <label htmlFor="name" className="form-label">
                   Name
@@ -122,6 +142,19 @@ const Contact = () => {
           </div>
         </div>
       </div>
+      <ToastContainer
+        position="top-center"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover={false}
+        theme="light"
+        transition={Bounce}
+      />
     </div>
   );
 };