Almost done

2026-03-05 17:35:27 +01:00
parent 278471e53b
commit e44fceaf32
30 changed files with 1077 additions and 572 deletions
@@ -0,0 +1,78 @@
+// 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>
+    );
+}