78 lines
4.0 KiB
TypeScript
78 lines
4.0 KiB
TypeScript
// app/admin/AdminForm.tsx
|
|
|
|
'use client';
|
|
|
|
import { useActionState, useEffect, useState } from 'react';
|
|
import { saveConfigAction } from './actions';
|
|
|
|
export default function AdminForm({ initialConfig }: { initialConfig: any }) {
|
|
const [state, formAction, isPending] = useActionState(saveConfigAction, null);
|
|
const [showToast, setShowToast] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (state?.success) {
|
|
setShowToast(true);
|
|
const timer = setTimeout(() => setShowToast(false), 3000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [state]);
|
|
|
|
return (
|
|
<form action={formAction} className="flex flex-col gap-8">
|
|
{showToast && (
|
|
<div className="fixed top-5 right-5 bg-green-500 text-white px-6 py-3 rounded-lg shadow-2xl font-bold z-50 animate-bounce">
|
|
✓ Ändringar sparade!
|
|
</div>
|
|
)}
|
|
|
|
{/* Startsida */}
|
|
<section className="border-b pb-6">
|
|
<h2 className="text-xl font-bold mb-4 border-l-4 border-[#fdb84b] pl-2 text-[#406185]">Startsida</h2>
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" name="showBeachPromo" defaultChecked={initialConfig.showBeachPromo} className="w-5 h-5 accent-[#406185]" />
|
|
<span className="font-semibold">Visa Beach-Promo bar</span>
|
|
</label>
|
|
</section>
|
|
|
|
{/* Beach-Turnering */}
|
|
<section className="flex flex-col gap-6">
|
|
<h2 className="text-xl font-bold border-l-4 border-[#fdb84b] pl-2 text-[#406185]">Beach-Turnering</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-bold mb-1">Matchstart</label>
|
|
<input type="datetime-local" name="matchStart" defaultValue={initialConfig.beachPage.matchStart} className="w-full border p-2 rounded focus:ring-2 focus:ring-[#406185] outline-none" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-bold mb-1">Länk till Mat- & Sommarfesten</label>
|
|
<input name="festivalLink" defaultValue={initialConfig.beachPage.festivalLink} className="w-full border p-2 rounded focus:ring-2 focus:ring-[#406185] outline-none" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-bold mb-1">Meddelande vid stängd anmälan</label>
|
|
<textarea name="closeReason" defaultValue={initialConfig.beachPage.closeReason} className="w-full border p-2 rounded h-20" />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-bold mb-1">Övrig info (en rad per punkt på sajten)</label>
|
|
<textarea name="otherInfo" defaultValue={initialConfig.beachPage.otherInfo} className="w-full border p-2 rounded h-24" />
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-bold mb-1">Pris-text (längst ner på infosidan)</label>
|
|
<input name="prizesText" defaultValue={initialConfig.beachPage.prizesText} className="w-full border p-2 rounded" />
|
|
</div>
|
|
|
|
<label className="flex items-center gap-2 cursor-pointer text-red-600 bg-red-50 p-3 rounded-lg border border-red-100">
|
|
<input type="checkbox" name="isClosedOverride" defaultChecked={initialConfig.beachPage.isClosedOverride} className="w-5 h-5 accent-red-600" />
|
|
<span className="font-bold uppercase">Stäng anmälan manuellt</span>
|
|
</label>
|
|
</section>
|
|
|
|
<button type="submit" disabled={isPending} className="bg-[#406185] text-white py-4 rounded-lg font-bold text-lg hover:bg-black transition-all active:scale-95 disabled:bg-gray-400">
|
|
{isPending ? 'Sparar...' : 'Spara inställningar'}
|
|
</button>
|
|
</form>
|
|
);
|
|
} |