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

hopefully works now?
All checks were successful
Build / build (push) Successful in 2m43s
Details

Browse Source
This commit is contained in:
Nareshkumar Rao
2025-04-02 23:30:25 +02:00
parent 456edfba07
commit 35efde0db9
3 changed files with 89 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/app/contact/ContactComponent.tsx
View File

@@ -1,81 +0,0 @@
"use client";
import SubmitContact from "@/components/contact";
import { useActionState } from "react";
import ReCAPTCHA from "react-google-recaptcha";
export default function ContactComponent({
recaptchaSiteKey,
}: {
recaptchaSiteKey: string | undefined;
}) {
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 || recaptchaSiteKey == null}
>
{pending ? "Sending..." : "Submit"}
</button>
</form>
</>
);
}

4
src/app/contact/action.ts Normal file
View File

@@ -0,0 +1,4 @@
"use server";
export async function getReCaptchaSiteKey() {
return process.env.RECAPTCHA_SITE_KEY;
}

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

@@ -1,12 +1,88 @@
"use server"; "use client";
import ContactComponent from "./ContactComponent"; import SubmitContact from "@/components/contact";
import { useActionState, useEffect, useState } from "react";
import ReCAPTCHA from "react-google-recaptcha";
import { getReCaptchaSiteKey } from "./action";
export default async function ContactPage() { export default function ContactPage() {
const recaptchaSiteKey = await getSiteKey(); const [recaptchaSiteKey, setRecaptchaSiteKey] = useState<string | undefined>(
return <ContactComponent recaptchaSiteKey={recaptchaSiteKey} />; undefined
} );
async function getSiteKey() { useEffect(() => {
return process.env.RECAPTCHA_SITE_KEY; getReCaptchaSiteKey().then(setRecaptchaSiteKey);
}, []);
const inputStyle = {
backgroundColor: "#111",
color: "#eee",
borderWidth: 0,
padding: "1rem",
};
const [state, formAction, pending] = useActionState(SubmitContact, null);
return recaptchaSiteKey == null ? (
<>Loading...</>
) : (
<>
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 || recaptchaSiteKey == null}
>
{pending ? "Sending..." : "Submit"}
</button>
</form>
</>
);
} }