import React, { useState } from "react"; import { useFireproof } from "use-fireproof"; export default function App() { const { useLiveQuery, useDocument, database } = useFireproof("trading-signup-list"); const { doc, merge, submit } = useDocument({ name: "", kit: "", offer: "", status: "pending", createdAt: Date.now(), type: "signup", }); const { docs } = useLiveQuery("type", { key: "signup", descending: true }); const [expandedId, setExpandedId] = useState(null); const handleSubmit = (e) => { e.preventDefault(); if (!doc.name.trim() || !doc.kit.trim()) return; merge({ createdAt: Date.now() }); submit(); }; const cycleStatus = (entry) => { const next = { pending: "active", active: "locked", locked: "pending" }; database.put({ ...entry, status: next[entry.status] || "pending" }); }; const deleteEntry = (id) => database.del(id); const statusColors = { active: { bar: "bg-[#3d9a50]", label: "text-[#0f172a]", text: "ACTIVE" }, pending: { bar: "bg-[#d4a800]", label: "text-[#0f172a]", text: "PENDING" }, locked: { bar: "bg-[#6b7280]", label: "text-white", text: "LOCKED" }, }; const c = { bg: "bg-[#f5f3ee]", card: "bg-white border-[3px] border-[#0f172a]", ink: "text-[#0f172a]", muted: "text-[#6b7280]", accent: "bg-[#c0392b]", accentHover: "hover:bg-[#a93226]", yellow: "bg-[#d4a800]", input: "bg-white border-[3px] border-[#0f172a] rounded-[4px] px-3 py-2 w-full text-[#0f172a] text-sm font-[Space_Grotesk] outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 transition-transform duration-150", btnPrimary: "bg-[#c0392b] text-white border-[3px] border-[#0f172a] rounded-[4px] px-5 py-2 font-bold uppercase tracking-wide text-sm shadow-[4px_4px_0px_#0f172a] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#0f172a] active:translate-x-0.5 active:translate-y-0.5 active:shadow-none transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed", btnSm: "border-[3px] border-[#0f172a] rounded-[4px] px-3 py-1 text-xs font-bold uppercase tracking-wide shadow-[3px_3px_0px_#0f172a] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[5px_5px_0px_#0f172a] active:translate-x-0.5 active:translate-y-0.5 active:shadow-none transition-all duration-150", }; return (

{/* Floating shapes */}

{/* Nav */} {/* Hero */}

Trading Sign-Up List

Add your name, kit, and trade offer to join the session

{/* Sign-Up Form */}

New Sign-Up

{/* Roster */}

Session Roster

{docs.length === 0 ? (

No sign-ups yet — be the first!

) : (

setExpandedId(isOpen ? null : entry._id)}>
{entry.name} {sc.text}

{entry.kit}

{isOpen && entry.offer && (
Trade Offer: {entry.offer}
)}

)}

Side-Kits Trading Sign-Up List — Real-Time Session Board

); }