import React from "react" import { useFireproof } from "use-fireproof" import { useViewer } from "use-vibes" const STATIONS = [ { id: "sack-race", name: "Sack Race" }, { id: "relay", name: "Relay" }, { id: "water-balloons", name: "Water Balloons" }, { id: "tug-of-war", name: "Tug of War" }, { id: "snack-table", name: "Snack Table" }, ] function SignupForm({ can, database, c }) { const { useDocument } = useFireproof("field-day-volunteers") const { doc, merge, submit } = useDocument({ name: "", station: STATIONS[0].id, createdAt: Date.now(), }) if (!can("write")) { return (

Sign Up

Read-only view — contact the organizer for write access to volunteer.

) } const handleSubmit = (e) => { e.preventDefault() if (!doc.name.trim()) return submit() } return (

Sign Up

) } export default function App() { const { viewer, can } = useViewer() const { useLiveQuery, database } = useFireproof("field-day-volunteers") const { docs: volunteers } = useLiveQuery("station") const c = { page: "min-h-screen bg-[#f4f1ea] text-[#1a1a1a] dark:bg-[#15140f] dark:text-[#ececec] font-['Helvetica_Neue',Helvetica,Arial,sans-serif]", header: "border-b-2 border-[#1a1a1a] dark:border-[#ececec] px-5 py-6", title: "text-3xl md:text-5xl font-bold tracking-tight uppercase", tagline: "text-sm mt-1 italic opacity-70", main: "max-w-3xl mx-auto px-4 py-6 space-y-6", section: "border border-[#1a1a1a] dark:border-[#ececec] bg-white dark:bg-[#1f1e19] p-4", h2: "text-xl font-bold uppercase tracking-wide border-b border-[#1a1a1a] dark:border-[#ececec] pb-2 mb-3", input: "w-full border border-[#1a1a1a] dark:border-[#ececec] bg-transparent px-3 py-3 min-h-[44px] text-base", btn: "min-h-[44px] px-4 py-2 bg-[#1a1a1a] text-[#f4f1ea] dark:bg-[#ececec] dark:text-[#15140f] font-bold uppercase tracking-wide text-sm", btnGhost: "min-h-[44px] px-3 py-1 border border-[#1a1a1a] dark:border-[#ececec] text-xs uppercase", row: "flex items-center justify-between py-2 border-b border-[#1a1a1a]/20 dark:border-[#ececec]/20 last:border-0", grid: "grid gap-3", stationName: "font-bold uppercase", count: "text-xs opacity-60", } return (

Stations

{STATIONS.map((s) => { const roster = volunteers.filter((v) => v.station === s.id) return (

{s.name} {roster.length} volunteer{roster.length === 1 ? "" : "s"}

{roster.length === 0 ? (

No volunteers yet

) : ( roster.map((v) => (

{v.name} {can("write") && ( )}

)) )}

) })}

) }