78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
export default function Contact() {
|
|
const [form, setForm] = useState({ name: "", email: "", message: "" });
|
|
const [success, setSuccess] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
const handleChange = (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
|
) => {
|
|
setForm({ ...form, [e.target.name]: e.target.value });
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// Replace this with actual form submission logic (e.g., API call)
|
|
try {
|
|
// Simulate a successful submission
|
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
setSuccess(true);
|
|
setForm({ name: "", email: "", message: "" });
|
|
} catch (err) {
|
|
setError("Failed to send message. Please try again.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section id="contact" className="p-10 ">
|
|
<h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
|
|
Contact Me
|
|
</h2>
|
|
<form onSubmit={handleSubmit} className="mt-6 max-w-md mx-auto space-y-4">
|
|
{success && (
|
|
<p className="text-green-500">
|
|
Your message has been sent successfully!
|
|
</p>
|
|
)}
|
|
{error && <p className="text-red-500">{error}</p>}
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
placeholder="Name"
|
|
className="w-full p-2 border rounded dark:text-white"
|
|
required
|
|
value={form.name}
|
|
onChange={handleChange}
|
|
/>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="Email"
|
|
className="w-full p-2 border rounded dark:text-white"
|
|
required
|
|
value={form.email}
|
|
onChange={handleChange}
|
|
/>
|
|
<textarea
|
|
name="message"
|
|
placeholder="Message"
|
|
className="w-full p-2 border rounded dark:text-white"
|
|
rows={5}
|
|
required
|
|
value={form.message}
|
|
onChange={handleChange}
|
|
></textarea>
|
|
<button
|
|
type="submit"
|
|
className="w-full p-2 text-white rounded hover:bg-blue-600 transition"
|
|
>
|
|
Send
|
|
</button>
|
|
</form>
|
|
</section>
|
|
);
|
|
}
|