d-branch-2 (#18)
* ✨ refactor: streamline sitemap generation and contact form logic * ✨ refactor: update sendEmail function to handle JSON data
This commit is contained in:
Denshooter
@@ -1,87 +1,106 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {sendEmail} from "@/app/utils/send-email";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { sendEmail } from "@/app/utils/send-email";
|
||||
|
||||
export type FormData = {
|
||||
name: string;
|
||||
email: string;
|
||||
message: string;
|
||||
}
|
||||
export type ContactFormData = {
|
||||
name: string;
|
||||
email: string;
|
||||
message: string;
|
||||
};
|
||||
|
||||
export default function Contact() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [banner, setBanner] = useState<{ show: boolean, message: string, type: 'success' | 'error' }>({
|
||||
show: false,
|
||||
message: '',
|
||||
type: 'success'
|
||||
});
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [banner, setBanner] = useState<{
|
||||
show: boolean;
|
||||
message: string;
|
||||
type: "success" | "error";
|
||||
}>({
|
||||
show: false,
|
||||
message: "",
|
||||
type: "success",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setIsVisible(true);
|
||||
}, 350); // Delay to start the animation after Projects
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setIsVisible(true);
|
||||
}, 350); // Delay to start the animation after Projects
|
||||
}, []);
|
||||
|
||||
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
const form = e.currentTarget;
|
||||
const data: FormData = {
|
||||
name: (form.elements.namedItem('name') as HTMLInputElement).value,
|
||||
email: (form.elements.namedItem('email') as HTMLInputElement).value,
|
||||
message: (form.elements.namedItem('message') as HTMLTextAreaElement).value,
|
||||
};
|
||||
const response = await sendEmail(data);
|
||||
if (response.success) {
|
||||
form.reset();
|
||||
}
|
||||
setBanner({show: true, message: response.message, type: response.success ? 'success' : 'error'});
|
||||
setTimeout(() => {
|
||||
setBanner({...banner, show: false});
|
||||
}, 3000); // Hide banner after 3 seconds
|
||||
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
|
||||
const form = e.currentTarget as HTMLFormElement;
|
||||
const formData = new FormData(form);
|
||||
|
||||
const data: ContactFormData = {
|
||||
name: formData.get("name") as string,
|
||||
email: formData.get("email") as string,
|
||||
message: formData.get("message") as string,
|
||||
};
|
||||
|
||||
// Convert FormData to a plain object
|
||||
const jsonData = JSON.stringify(data);
|
||||
|
||||
const response = await sendEmail(jsonData);
|
||||
if (response.success) {
|
||||
form.reset();
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="contact" className={`p-10 ${isVisible ? 'animate-fly-in' : 'opacity-0'}`}>
|
||||
<h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
|
||||
Contact Me
|
||||
</h2>
|
||||
<div
|
||||
className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg mx-auto mt-6 relative">
|
||||
{banner.show && (
|
||||
<div
|
||||
className={`absolute top-0 left-0 right-0 text-white text-center py-2 rounded-2xl animate-fade-out ${banner.type === 'success' ? 'bg-green-500' : 'bg-red-500'}`}>
|
||||
{banner.message}
|
||||
</div>
|
||||
)}
|
||||
<form className="w-full space-y-4" onSubmit={onSubmit}>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Name"
|
||||
className="w-full p-2 border rounded dark:text-white"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
className="w-full p-2 border rounded dark:text-white"
|
||||
required
|
||||
/>
|
||||
<textarea
|
||||
name="message"
|
||||
placeholder="Message"
|
||||
className="w-full p-2 border rounded dark:text-white"
|
||||
rows={5}
|
||||
required
|
||||
></textarea>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full p-2 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded hover:from-blue-600 hover:to-purple-600 transition"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
setBanner({
|
||||
show: true,
|
||||
message: response.message,
|
||||
type: response.success ? "success" : "error",
|
||||
});
|
||||
setTimeout(() => {
|
||||
setBanner((prev) => ({ ...prev, show: false }));
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
id="contact"
|
||||
className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
|
||||
Contact Me
|
||||
</h2>
|
||||
<div className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg mx-auto mt-6 relative">
|
||||
{banner.show && (
|
||||
<div
|
||||
className={`absolute top-0 left-0 right-0 text-white text-center py-2 rounded-2xl animate-fade-out ${banner.type === "success" ? "bg-green-500" : "bg-red-500"}`}
|
||||
>
|
||||
{banner.message}
|
||||
</div>
|
||||
)}
|
||||
<form className="w-full space-y-4" onSubmit={onSubmit}>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Name"
|
||||
className="w-full p-2 border rounded dark:text-white"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
className="w-full p-2 border rounded dark:text-white"
|
||||
required
|
||||
/>
|
||||
<textarea
|
||||
name="message"
|
||||
placeholder="Message"
|
||||
className="w-full p-2 border rounded dark:text-white"
|
||||
rows={5}
|
||||
required
|
||||
></textarea>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full p-2 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded hover:from-blue-600 hover:to-purple-600 transition"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user