import React from "react" import { useFireproof } from "use-fireproof" import { useViewer } from "use-vibes" export default function App() { const { viewer, can } = useViewer(); const { useDocument, useLiveQuery, database } = useFireproof("grill-queue"); const { doc, merge, submit } = useDocument({ name: "", dish: "", minutes: 15, createdAt: Date.now(), }); const { docs: queue } = useLiveQuery("createdAt"); const handleSubmit = (e) => { e.preventDefault(); if (!doc.name.trim() || !doc.dish.trim()) return; merge({ createdAt: Date.now() }); submit(); }; const c = { page: "min-h-screen bg-[#0a0a14] text-[#ecebf5] font-['Inter',sans-serif] pb-12", header: "sticky top-0 z-10 bg-[#0a0a14]/95 backdrop-blur border-b border-[#2a2838] px-5 py-4 flex items-center justify-between", title: "font-['Bebas_Neue',sans-serif] text-3xl tracking-wider text-[#ecebf5]", tag: "text-xs uppercase tracking-widest text-[#a78bfa] font-['Space_Mono',monospace]", main: "max-w-xl mx-auto px-5 pt-6 space-y-6", section: "bg-[#15131f] border border-[#2a2838] rounded-xl p-5", sectionTitle: "font-['Bebas_Neue',sans-serif] text-2xl tracking-wide mb-4 text-[#ecebf5]", input: "w-full bg-[#0a0a14] border border-[#2a2838] rounded-lg px-3 py-3 text-[#ecebf5] placeholder:text-[#6b6880] focus:outline-none focus:border-[#a78bfa] min-h-[44px]", label: "block text-xs uppercase tracking-widest text-[#a78bfa] font-['Space_Mono',monospace] mb-1", btn: "w-full bg-[#a78bfa] text-[#0a0a14] font-semibold rounded-lg py-3 min-h-[44px] hover:bg-[#bda5ff] transition", btnGhost: "text-xs text-[#6b6880] hover:text-[#a78bfa] font-['Space_Mono',monospace] uppercase tracking-wider", row: "flex items-center gap-3 py-3 border-b border-[#2a2838] last:border-b-0", rowIdx: "font-['Bebas_Neue',sans-serif] text-2xl text-[#a78bfa] w-8 text-center", rowMain: "flex-1 min-w-0", rowName: "font-semibold text-[#ecebf5] truncate", rowDish: "text-sm text-[#9b98b0] truncate", rowMins: "font-['Space_Mono',monospace] text-sm text-[#a78bfa] whitespace-nowrap", empty: "text-center py-8 text-[#6b6880] font-['Space_Mono',monospace] text-sm", readonly: "text-sm text-[#9b98b0] italic", }; return (

Claim a slot

{can("write") ? ( ) : (

Read-only view — contact the host for write access to claim a slot.

)}

On deck

{queue.length === 0 ? (

No one in line yet. Grill's all yours.

) : (

{i + 1}

{q.name}

{q.dish}

{q.minutes} min {can("write") && ( )}

)}

); }