naresh/nrx.sh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

push key through server component

Browse Source
This commit is contained in:
Nareshkumar Rao 2025-04-02 00:43:11 +02:00
parent 0856cc3152
commit ac420f1419
2 changed files with 91 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/app/contact/ContactComponent.tsx Normal file
View File

@ -0,0 +1,83 @@
/* eslint-disable react/no-unescaped-entities */
"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>
</>
);
}

89
src/app/contact/page.tsx
View File

@ -1,85 +1,12 @@
/* eslint-disable react/no-unescaped-entities */ "use server";
"use client"; import ContactComponent from "./ContactComponent";
import SubmitContact from "@/components/contact"; export default async function ContactPage() {
import { useActionState } from "react"; const recaptchaSiteKey = process.env.RECAPTCHA_SITE_KEY;
import ReCAPTCHA from "react-google-recaptcha"; if (!recaptchaSiteKey) {
console.error("ReCAPTCHA site key is not set");
const RECAPTCHA_SITE_KEY = process.env.RECAPTCHA_SITE_KEY; throw new Error("ReCAPTCHA not correctly configured");
export default function Contact() {
const inputStyle = {
backgroundColor: "#111",
color: "#eee",
borderWidth: 0,
padding: "1rem",
};
const [state, formAction, pending] = useActionState(SubmitContact, null);
if (!RECAPTCHA_SITE_KEY) {
throw new Error("ReCAPTCHA not configured correctly");
} }
return <ContactComponent recaptchaSiteKey={recaptchaSiteKey} />;
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={RECAPTCHA_SITE_KEY} 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>
</>
);
} }