82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import SubmitContact from "@/components/contact";
|
||
|
|
import { useActionState } from "react";
|
||
|
|
import ReCAPTCHA from "react-google-recaptcha";
|
||
|
|
|
||
|
|
export default function ContactComponent({
|
||
|
|
recaptchaSiteKey,
|
||
|
|
}: {
|
||
|
|
recaptchaSiteKey: string;
|
||
|
|
}) {
|
||
|
|
const inputStyle = {
|
||
|
|
backgroundColor: "#111",
|
||
|
|
color: "#eee",
|
||
|
|
borderWidth: 0,
|
||
|
|
padding: "1rem",
|
||
|
|
};
|
||
|
|
const [state, formAction, pending] = useActionState(SubmitContact, null);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
Need to get in touch?
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<form
|
||
|
|
action={formAction}
|
||
|
|
style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
style={inputStyle}
|
||
|
|
type="text"
|
||
|
|
name="name"
|
||
|
|
placeholder="Your Name"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
style={inputStyle}
|
||
|
|
type="email"
|
||
|
|
name="email"
|
||
|
|
placeholder="Your Email"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
<textarea
|
||
|
|
style={{ ...inputStyle, resize: "none", height: "5rem" }}
|
||
|
|
name="message"
|
||
|
|
placeholder="Your Message"
|
||
|
|
required
|
||
|
|
></textarea>
|
||
|
|
{state && (
|
||
|
|
<span
|
||
|
|
style={{
|
||
|
|
padding: "1rem",
|
||
|
|
backgroundColor: "error" in state ? "#f003" : "#0f03",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{"error" in state && state.error}
|
||
|
|
{"success" in state && "Submitted successfully!"}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<ReCAPTCHA sitekey={recaptchaSiteKey} theme="dark" />
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
style={{
|
||
|
|
...inputStyle,
|
||
|
|
backgroundColor: pending ? "#333" : "#111",
|
||
|
|
cursor: pending ? "default" : "pointer",
|
||
|
|
}}
|
||
|
|
onMouseEnter={(e) => {
|
||
|
|
if (!pending) e.currentTarget.style.backgroundColor = "#333";
|
||
|
|
}}
|
||
|
|
onMouseLeave={(e) => {
|
||
|
|
if (!pending) e.currentTarget.style.backgroundColor = "#111";
|
||
|
|
}}
|
||
|
|
disabled={pending}
|
||
|
|
>
|
||
|
|
{pending ? "Sending..." : "Submit"}
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|