extract hcaptcha into reusable component w/ defaults

components/Captcha/Captcha.tsx

@@ -0,0 +1,38 @@
+import { memo } from "react";
+import { useTheme } from "next-themes";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
+
+type CaptchaProps = {
+  size?: "normal" | "compact" | "invisible";
+  theme?: "light" | "dark";
+  id?: string;
+
+  // callbacks pulled verbatim from node_modules/@hcaptcha/react-hcaptcha/types/index.d.ts
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  onExpire?: () => any;
+  onOpen?: () => any;
+  onClose?: () => any;
+  onChalExpired?: () => any;
+  onError?: (event: string) => any;
+  onVerify?: (token: string) => any;
+  onLoad?: () => any;
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+};
+
+const Captcha = ({ size = "normal", theme, id, ...rest }: CaptchaProps) => {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <HCaptcha
+      sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY}
+      reCaptchaCompat={false}
+      tabIndex={0}
+      size={size}
+      theme={theme || (resolvedTheme === "dark" ? "dark" : "light")}
+      id={id}
+      {...rest}
+    />
+  );
+};
+
+export default memo(Captcha);

components/ContactForm/ContactForm.tsx

@@ -1,9 +1,8 @@
 import { useState } from "react";
-import { useTheme } from "next-themes";
 import classNames from "classnames/bind";
 import { Formik, Form, Field } from "formik";
-import HCaptcha from "@hcaptcha/react-hcaptcha";
 import Link from "../Link/Link";
+import Captcha from "../Captcha/Captcha";
 import { SendIcon, CheckOcticon, XOcticon } from "../Icons";
 import type { FormikHelpers } from "formik";
 
@@ -22,8 +21,6 @@ type ContactFormProps = {
 };
 
 const ContactForm = ({ className }: ContactFormProps) => {
-  const { resolvedTheme } = useTheme();
-
   // status/feedback:
   const [submitted, setSubmitted] = useState(false);
   const [success, setSuccess] = useState(null);
@@ -137,12 +134,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
           </div>
 
           <div className={styles.hcaptcha}>
-            <HCaptcha
+            <Captcha onVerify={(token) => setFieldValue("h-captcha-response", token)} />
-              sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY}
-              size="normal"
-              theme={resolvedTheme === "dark" ? "dark" : "light"}
-              onVerify={(token) => setFieldValue("h-captcha-response", token)}
-            />
           </div>
 
           <div className={styles.action_row}>