73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import contactForm from "@/actions/contact";
|
|
|
|
export default function ContactForm() {
|
|
const [message, setMessage] = useState<string | null>(null);
|
|
|
|
const callback = async (formData: FormData) => {
|
|
await contactForm(formData);
|
|
setMessage(
|
|
"Our intrepid team of code monkeys will be looking at this as soon as possible!"
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<form className="space-y-4" action={callback}>
|
|
<div>
|
|
<label htmlFor="name" className="block mb-1">
|
|
Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
className="w-full px-3 py-2 border rounded"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="email" className="block mb-1">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
className="w-full px-3 py-2 border rounded"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="message" className="block mb-1">
|
|
Message
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
rows={4}
|
|
className="w-full px-3 py-2 border rounded"
|
|
required
|
|
></textarea>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
|
|
>
|
|
Send Message
|
|
</button>
|
|
{message !== null && (
|
|
<>
|
|
<div className="p-4 bg-gray-200">
|
|
<p className="text-xl">Thanks!</p>
|
|
<p className="p-4">{message}</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</form>
|
|
</>
|
|
);
|
|
}
|