Updated so that the rules and class text can be updated through the admin page
This commit is contained in:
@@ -6,8 +6,9 @@ import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
|
||||
import React, { useRef, useActionState, useEffect } from 'react';
|
||||
import { FaUser, FaEnvelope, FaPhone, FaUsers, FaTrophy, FaCheckCircle, FaExclamationTriangle } from "react-icons/fa";
|
||||
import { submitRegistration } from './actions';
|
||||
import { SiteConfig } from '../lib/config';
|
||||
|
||||
export default function BeachRegistrationForm({ config, turnstileSiteKey }: { config: any, turnstileSiteKey: string }) {
|
||||
export default function BeachRegistrationForm({ config, turnstileSiteKey }: { config: SiteConfig, turnstileSiteKey: string }) {
|
||||
const [state, formAction, isPending] = useActionState(submitRegistration, null);
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
const turnstileRef = useRef<TurnstileInstance>(null);
|
||||
@@ -107,7 +108,7 @@ export default function BeachRegistrationForm({ config, turnstileSiteKey }: { co
|
||||
<div className="flex-2">
|
||||
<label className="font-bold text-[#39979f] mb-3 block text-sm uppercase">Välj klass</label>
|
||||
<div className={`grid grid-cols-2 md:grid-cols-${Math.min(classesData.length, 3)} gap-3`}>
|
||||
{classesData.map((c: any) => (
|
||||
{classesData.map((c: { name: string; color: string; desc?: string }) => (
|
||||
<LevelButton
|
||||
key={c.name}
|
||||
value={c.name}
|
||||
@@ -130,7 +131,7 @@ export default function BeachRegistrationForm({ config, turnstileSiteKey }: { co
|
||||
|
||||
<input type="text" name="website" className="hidden" tabIndex={-1} />
|
||||
|
||||
<div className="flex justify-center py-2"><Turnstile ref={turnstileRef} siteKey={turnstileSiteKey} options={{ theme: 'light' }}/></div>
|
||||
<div className="flex justify-center py-2"><Turnstile ref={turnstileRef} siteKey={turnstileSiteKey} 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'}`}>
|
||||
@@ -153,7 +154,7 @@ export default function BeachRegistrationForm({ config, turnstileSiteKey }: { co
|
||||
}
|
||||
|
||||
// Uppdaterad med defaultChecked support
|
||||
function LevelButton({ value, label, desc, color, defaultChecked }: any) {
|
||||
function LevelButton({ value, label, desc, color, defaultChecked }: { value: string; label: string; desc?: string; color: string; defaultChecked?: boolean }) {
|
||||
return (
|
||||
<label className="cursor-pointer flex-1 relative" style={{ '--class-color': color } as React.CSSProperties}>
|
||||
<input
|
||||
@@ -173,7 +174,7 @@ function LevelButton({ value, label, desc, color, defaultChecked }: any) {
|
||||
);
|
||||
}
|
||||
|
||||
function InputGroup({ icon, ...props }: any) {
|
||||
function InputGroup({ icon, ...props }: React.InputHTMLAttributes<HTMLInputElement> & { icon: React.ReactNode }) {
|
||||
return (
|
||||
<div className="relative group">
|
||||
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-[#e6be8a] group-focus-within:text-[#39979f] transition-colors">
|
||||
|
||||
Reference in New Issue
Block a user