apply form confirmation

src/components/forms/apply-form.tsx

@@ -1,9 +1,11 @@
+import EmojiRain from "@components/EmojiRain";
 import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import axios from "axios";
 import Input from "@ui/form-elements/input";
 import Button from "@ui/button";
 import { hasKey } from "@utils/methods";
+import Feedback from "@ui/form-elements/feedback";
 
 interface IFormValues {
     firstName: string;
@@ -24,6 +26,8 @@ interface IFormValues {
 
 const ApplyForm = () => {
     const [message, setMessage] = useState("");
+    const [showEmojiRain, setShowEmojiRain] = useState<boolean>(false);
+
     const {
         register,
         handleSubmit,
@@ -35,6 +39,10 @@ const ApplyForm = () => {
         try {
             await axios.post("/api/apply", data);
             setMessage("Thank you for your application!");
+            setShowEmojiRain(true);
+
+            // Optional: Hide the EmojiRain after a set duration
+            setTimeout(() => setShowEmojiRain(false), 5000); // Adjust duration as necessary
             reset();
         } catch (error) {
             setMessage("Failed to submit the form. Please try again later.");
@@ -348,6 +356,10 @@ const ApplyForm = () => {
                 >
                     Apply
                 </Button>
+                {message && (
+                    <Feedback state="success">{message}</Feedback>
+                )}
+                {showEmojiRain && <EmojiRain />}
             </form>
         </div>
     );