switch to cloudflare turnstile

components/Captcha/Captcha.tsx

@@ -1,36 +1,21 @@
-import HCaptcha from "@hcaptcha/react-hcaptcha";
+import Turnstile from "react-turnstile";
 import useHasMounted from "../../hooks/useHasMounted";
 import useTheme from "../../hooks/useTheme";
+import type { ComponentPropsWithoutRef } from "react";
 
-export type CaptchaProps = {
-  size?: "normal" | "compact" | "invisible";
-  theme?: "light" | "dark";
+export type CaptchaProps = Omit<ComponentPropsWithoutRef<typeof Turnstile>, "sitekey"> & {
   className?: 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, ekey: string) => any;
-  onLoad?: () => any;
-  /* eslint-enable @typescript-eslint/no-explicit-any */
 };
 
-const Captcha = ({ size = "normal", theme, className, ...rest }: CaptchaProps) => {
+const Captcha = ({ theme, className, ...rest }: CaptchaProps) => {
   const hasMounted = useHasMounted();
   const { activeTheme } = useTheme();
 
   return (
     <div className={className}>
       {hasMounted && (
-        <HCaptcha
-          sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY || "10000000-ffff-ffff-ffff-000000000001"}
-          reCaptchaCompat={false}
-          tabIndex={0}
-          size={size}
+        <Turnstile
+          sitekey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || "1x00000000000000000000AA"}
           theme={theme || (activeTheme === "dark" ? activeTheme : "light")}
           {...rest}
         />