import React from "react" import { callAI } from "call-ai" import { ImgGen } from "img-gen" import { useFireproof } from "use-fireproof" export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("camp-lost-found") const { doc, merge, save, reset } = useDocument({ type: "item", title: "", description: "", location: "", tag: "", _files: {}, claimed: false, createdAt: Date.now(), }) const { docs: items } = useLiveQuery((d) => d.type === "item" && !d.claimed ? d.createdAt : undefined, { descending: true }) const [isPosting, setIsPosting] = React.useState(false) const [claimingId, setClaimingId] = React.useState(null) const [claimName, setClaimName] = React.useState("") async function handlePost(e) { e?.preventDefault() if (!doc.description.trim()) return setIsPosting(true) try { const res = await callAI(`Categorize this lost-and-found item and suggest a short title. Description: "${doc.description}". Location: "${doc.location}".`, { schema: { properties: { tag: { type: "string", description: "category like clothing, electronics, water bottle, gear, book, accessory" }, title: { type: "string", description: "short scannable title, 2-5 words" } } } }) const { tag, title } = JSON.parse(res) await database.put({ ...doc, tag, title: title || doc.description.slice(0, 40), createdAt: Date.now() }) reset() } catch (err) { await database.put({ ...doc, title: doc.description.slice(0, 40), tag: "item", createdAt: Date.now() }) reset() } finally { setIsPosting(false) } } async function suggestExample() { setIsPosting(true) try { const res = await callAI("Invent a realistic example of a found item at a summer camp. Return description and location.", { schema: { properties: { description: { type: "string" }, location: { type: "string" } } } }) const { description, location } = JSON.parse(res) merge({ description, location }) } finally { setIsPosting(false) } } async function handleClaim(item) { if (!claimName.trim()) return await database.put({ ...item, claimed: true, claimedBy: claimName.trim(), claimedAt: Date.now() }) setClaimingId(null) setClaimName("") } const spinner = const c = { page: "min-h-screen bg-gradient-to-b from-[#2a1b4a] to-[#1a0f33] text-white font-['Nunito',sans-serif] pb-24", header: "sticky top-0 z-10 bg-[#2a1b4a]/90 backdrop-blur border-b border-white/10 px-4 py-3 flex items-center justify-between", title: "text-xl font-bold tracking-tight", tag: "text-xs text-[#f5d77a]", main: "max-w-2xl mx-auto px-4 py-4 space-y-4", section: "bg-[#3d2a6b]/40 border border-white/10 rounded-2xl p-4 shadow-lg", h2: "text-lg font-semibold mb-3", input: "w-full bg-[#1a0f33]/60 border border-white/10 rounded-lg px-3 py-3 min-h-[44px] text-white placeholder:text-white/40 focus:outline-none focus:border-[#7a5fb8]", btn: "min-h-[44px] px-4 py-3 rounded-lg bg-[#7a5fb8] hover:bg-[#8a6fc8] font-semibold transition active:scale-95", btnClaim: "min-h-[44px] px-4 py-2 rounded-lg bg-[#7ad9a0] hover:bg-[#8ae9b0] text-[#1a0f33] font-bold transition active:scale-95", btnGhost: "min-h-[44px] px-3 py-2 rounded-lg border border-white/20 hover:bg-white/5 transition text-sm", row: "bg-[#1a0f33]/40 border border-white/10 rounded-xl p-3 flex gap-3", avatar: "w-8 h-8 rounded-full border border-white/20", pill: "inline-block text-xs px-2 py-0.5 rounded-full bg-[#f5d77a]/20 text-[#f5d77a] border border-[#f5d77a]/30", muted: "text-sm text-white/60", } return (

Post a found item

On the board ({items.length})

No items yet — be the first to post.
{item._files?.photo?.url ? ( ) : ( )}

{item.title} {item.tag && {item.tag}}

{item.description}
{item.location &&
📍 {item.location}
}
{claimingId !== item._id && ( )}
{claimingId === item._id && (
setClaimName(e.target.value)} autoFocus />
)}

) }

Post a found item

On the board (0)