Updated so that the rules and class text can be updated through the admin page

This commit is contained in:
2026-04-19 13:28:13 +02:00 Verified
parent 16f5c3f22b
commit 0d4d447569
11 changed files with 103 additions and 39 deletions
+15 -12
View File
@@ -8,8 +8,12 @@ import { IoIosMail } from "react-icons/io";
import Footer from '../components/Footer';
import Header from '../components/Header';
import BeachRegistrationForm from './BeachRegistrationForm';
import { SiteConfig } from '../lib/config';
import Image from 'next/image';
import matsommar from "../../public/images/hk-mosf.webp";
export default function BeachClientPage({ config, turnstileSiteKey }: { config: any, turnstileSiteKey: string }) {
export default function BeachClientPage({ config, turnstileSiteKey }: { config: SiteConfig, turnstileSiteKey: string }) {
const [timeInfo, setTimeInfo] = useState({
dateStr: 'Laddar...',
matchStr: 'Laddar...',
@@ -54,9 +58,9 @@ export default function BeachClientPage({ config, turnstileSiteKey }: { config:
{/* Logotyp med subtil hover-effekt */}
<div className="relative group cursor-default">
<div className="absolute -inset-4 bg-white/20 blur-2xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
<img
<Image
className="w-full max-w-62.5 md:max-w-75 relative drop-shadow-2xl transform hover:scale-105 transition-transform duration-500"
src="/images/hk-mosf.webp"
src={matsommar}
alt="Mat- & Sommarfesten"
/>
</div>
@@ -130,20 +134,19 @@ export default function BeachClientPage({ config, turnstileSiteKey }: { config:
<FaClipboardList size={24} />
<h4 className="font-beachday text-2xl uppercase tracking-[0.05em] text-black">Regler</h4>
</div>
<p className="text-gray-700 text-base leading-relaxed">
Matcherna spelas 4v4 med <a target="_blank" rel="noreferrer" className="text-[#39979f] font-bold hover:underline" href="https://www.volleyboll.se/forbundet/valkommen-till-volleyboll/grenar-och-spelformer/volleyboll">inomhusregler</a>,
förutom poängräkningen som följer reglerna för <a target="_blank" rel="noreferrer" className="text-[#39979f] font-bold hover:underline" href="https://www.volleyboll.se/forbundet/valkommen-till-volleyboll/grenar-och-spelformer/beachvolley">beachvolley</a>.
Turneringsformen som kommer spelas är <span className='italic'>Double Elimination</span> vilket betyder att alla lag spelar minst två matcher under dagen.
</p>
<div
className="text-gray-700 text-base leading-relaxed [&_a]:text-[#39979f] [&_a]:font-bold [&_a:hover]:underline [&_i]:italic [&_em]:italic"
dangerouslySetInnerHTML={{ __html: config.beachPage?.rulesText || "" }}
/>
<div className="flex items-center gap-3 text-[#cc8124] mt-6">
<FaUsers size={24} />
<h4 className="font-beachday text-2xl uppercase tracking-[0.05em] text-black">Klasser</h4>
</div>
<div className="text-gray-700 text-sm space-y-3">
<p className="leading-snug">Turneringen kommer att delas upp i flera olika klasser beroende antal anmälda lag och dess nivå:</p>
<p className="leading-snug">{config.beachPage?.classesIntroText}</p>
<div className="flex gap-2 flex-wrap">
{classesData.map((c: any, i: number) => (
{classesData.map((c: { name: string; color: string; desc?: string }, i: number) => (
<span
key={i}
className="px-2.5 py-1 rounded-md font-bold border text-xs tracking-wider"
@@ -153,7 +156,7 @@ export default function BeachClientPage({ config, turnstileSiteKey }: { config:
</span>
))}
</div>
<p className="italic text-xs text-gray-500">Gör en gissning er nivå i anmälan skriv gärna något extra om ni är osäkra. Vi meddelar om det skulle bli ändringar.</p>
<p className="italic text-xs text-gray-500">{config.beachPage?.classesOutroText}</p>
</div>
</div>
@@ -233,6 +236,6 @@ export default function BeachClientPage({ config, turnstileSiteKey }: { config:
</main>
<Footer />
</div>
</div >
);
}