From ac420f1419d171c539681ce7f3cf5cc9b1f8b5a2 Mon Sep 17 00:00:00 2001
From: Nareshkumar Rao <me@nareshkumarrao.com>
Date: Wed, 2 Apr 2025 00:43:11 +0200
Subject: [PATCH] push key through server component

---
 src/app/contact/ContactComponent.tsx | 83 ++++++++++++++++++++++++++
 src/app/contact/page.tsx             | 89 +++-------------------------
 2 files changed, 91 insertions(+), 81 deletions(-)
 create mode 100644 src/app/contact/ContactComponent.tsx

diff --git a/src/app/contact/ContactComponent.tsx b/src/app/contact/ContactComponent.tsx
new file mode 100644
index 0000000..6328f14
--- /dev/null
+++ b/src/app/contact/ContactComponent.tsx
@@ -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>
+    </>
+  );
+}
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 6aced37..9590451 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,85 +1,12 @@
-/* eslint-disable react/no-unescaped-entities */
+"use server";
 
-"use client";
+import ContactComponent from "./ContactComponent";
 
-import SubmitContact from "@/components/contact";
-import { useActionState } from "react";
-import ReCAPTCHA from "react-google-recaptcha";
-
-const RECAPTCHA_SITE_KEY = process.env.RECAPTCHA_SITE_KEY;
-
-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");
+export default async function ContactPage() {
+  const recaptchaSiteKey = process.env.RECAPTCHA_SITE_KEY;
+  if (!recaptchaSiteKey) {
+    console.error("ReCAPTCHA site key is not set");
+    throw new Error("ReCAPTCHA not correctly configured");
   }
-
-  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>
-    </>
-  );
+  return <ContactComponent recaptchaSiteKey={recaptchaSiteKey} />;
 }