import React, { useState } from "react"; import { useFireproof } from "use-fireproof"; export default function App() { const { useLiveQuery, useDocument, database } = useFireproof("side-kits-trading-list"); const { doc, merge, submit } = useDocument({ type: "listing", name: "", contact: "", item: "", want: "", status: "available", createdAt: Date.now(), }); const { docs } = useLiveQuery("type", { key: "listing", descending: true }); const [filter, setFilter] = useState("all"); const [expanded, setExpanded] = useState(null); const handleSubmit = (e) => { e.preventDefault(); if (!doc.name.trim() || !doc.item.trim()) return; merge({ createdAt: Date.now() }); submit(); }; const setStatus = (d, status) => database.put({ ...d, status }); const deleteDoc = (id) => database.del(id); const filtered = docs.filter((d) => filter === "all" || d.status === filter); const statusColors = { available: "bg-[#4a9e6b] text-[#0f172a]", pending: "bg-[#d4a800] text-[#0f172a]", traded: "bg-[#6b7280] text-white", }; const c = { bg: "bg-[#f5f3ee]", card: "bg-white border-[3px] border-[#1a1628]", ink: "text-[#1a1628]", muted: "text-[#6b6880]", accent: "bg-[#c0392b]", yellow: "bg-[#d4a800]", shadow: "shadow-[4px_4px_0px_#1a1628]", shadowSm: "shadow-[3px_3px_0px_#1a1628]", input: "w-full border-[3px] border-[#1a1628] rounded-[4px] px-3 py-2 text-sm font-medium bg-white focus:outline-none focus:translate-x-[-2px] focus:translate-y-[-2px] focus:shadow-[4px_4px_0px_#1a1628] transition-all duration-150", btnPrimary: "bg-[#c0392b] text-white border-[3px] border-[#1a1628] rounded-[4px] px-4 py-2 text-xs font-bold uppercase tracking-wide shadow-[4px_4px_0px_#1a1628] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[6px_6px_0px_#1a1628] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 cursor-pointer", btnSecondary: "bg-[#d4a800] text-[#1a1628] border-[3px] border-[#1a1628] rounded-[4px] px-3 py-1.5 text-xs font-bold uppercase tracking-wide shadow-[3px_3px_0px_#1a1628] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[5px_5px_0px_#1a1628] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 cursor-pointer", btnGhost: "bg-white text-[#1a1628] border-[3px] border-[#1a1628] rounded-[4px] px-3 py-1.5 text-xs font-bold uppercase tracking-wide hover:shadow-[3px_3px_0px_#1a1628] hover:translate-x-[-2px] hover:translate-y-[-2px] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150 cursor-pointer", label: "block text-[0.6rem] font-bold uppercase tracking-[0.15em] text-[#6b6880] mb-1", }; return (

{/* Ambient background */}

{/* NAV */} {/* HERO */}

Sign Up & Trade

{/* SIGN-UP FORM */}

New Listing

{/* FILTER */}

{["all", "available", "pending", "traded"].map((f) => ( ))}

{/* LISTINGS */} {filtered.length === 0 ? (

No listings yet — be the first to sign up.

) : (

{filtered.map((d) => (

{d.name} {d.contact && {d.contact}} {d.status}

Offering {d.item}

{d.want && (

Wants {d.want}

)}

{expanded === d._id && (

{new Date(d.createdAt).toLocaleDateString()}

)}

))}

)}

); }