Edit BeachRegistrationForm.tsx

app/beach/BeachClientPage.tsx

@@ -9,7 +9,7 @@ import Footer from '../components/Footer';
 import Header from '../components/Header';
 import BeachRegistrationForm from './BeachRegistrationForm';
 
-export default function BeachClientPage({ config }: { config: any }) {
+export default function BeachClientPage({ config, turnstileSiteKey }: { config: any, turnstileSiteKey: string }) {
     const [timeInfo, setTimeInfo] = useState({
         dateStr: 'Laddar...',
         matchStr: 'Laddar...',
@@ -200,7 +200,7 @@ export default function BeachClientPage({ config }: { config: any }) {
                 </section>
 
                 {/* Rendera formuläret endast om anmälan är öppen */}
-                {!timeInfo.isClosed && <BeachRegistrationForm config={config} />}
+                {!timeInfo.isClosed && <BeachRegistrationForm config={config} turnstileSiteKey={turnstileSiteKey} />}
 
                 <section className="w-full flex justify-center px-4 mt-10 mb-20">
                     <div className="bg-linear-to-br from-[#39979f] to-[#62b8bc] p-10 md:p-12 rounded-[40px] shadow-2xl w-full max-w-2xl text-center transform transition-transform duration-500 border border-blue-400/20 relative overflow-hidden group">

app/beach/BeachRegistrationForm.tsx

@@ -7,7 +7,7 @@ import React, { useRef, useActionState, useEffect } from 'react';
 import { FaUser, FaEnvelope, FaPhone, FaUsers, FaTrophy, FaCheckCircle, FaExclamationTriangle } from "react-icons/fa";
 import { submitRegistration } from './actions';
 
-export default function BeachRegistrationForm({ config }: { config: any }) {
+export default function BeachRegistrationForm({ config, turnstileSiteKey }: { config: any, turnstileSiteKey: string }) {
     const [state, formAction, isPending] = useActionState(submitRegistration, null);
     const formRef = useRef<HTMLFormElement>(null);
     const turnstileRef = useRef<TurnstileInstance>(null);
@@ -130,13 +130,7 @@ export default function BeachRegistrationForm({ config }: { config: any }) {
 
                     <input type="text" name="website" className="hidden" tabIndex={-1} />
 
-                    <div className="flex justify-center py-2">
+                    <div className="flex justify-center py-2"><Turnstile ref={turnstileRef} siteKey={turnstileSiteKey} options={{ theme: 'light' }}/></div>
-                        <Turnstile
-                            ref={turnstileRef}
-                            siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || ''}
-                            options={{ theme: 'light' }}
-                        />
-                    </div>
 
                     {state && (
                         <div className={`flex items-center gap-3 p-5 rounded-2xl font-bold transition-all ${state.success ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>

app/beach/page.tsx

@@ -2,11 +2,16 @@
 import { getConfig } from '../lib/config';
 import BeachClientPage from './BeachClientPage';
 
+export const dynamic = 'force-dynamic';
+
 export const metadata = {
     title: 'Beachturnering',
 };
 
 export default async function BeachPage() {
     const config = await getConfig();
-    return <BeachClientPage config={config} />;
+    
+    const turnstileSiteKey = process.env.TURNSTILE_SITE_KEY || '';
+
+    return <BeachClientPage config={config} turnstileSiteKey={turnstileSiteKey} />;
 }