import React, { useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; export default function App() { const { useLiveQuery, useDocument, database } = useFireproof("free-bots-swap"); const { doc, merge, submit } = useDocument({ type: "listing", name: "", description: "", condition: "Good", status: "available", createdAt: Date.now(), }); const { docs: listings } = useLiveQuery("type", { key: "listing", descending: true }); const [isGenerating, setIsGenerating] = useState(false); const [selected, setSelected] = useState(null); async function handleGenerate() { if (!doc.name.trim()) return; setIsGenerating(true); try { const res = await callAI( `Write a short, friendly 2-sentence listing description for a free neighborhood swap of this robot/device: "${doc.name}". Condition: ${doc.condition}. Be specific and honest.`, { schema: { properties: { description: { type: "string" } } } } ); merge({ description: JSON.parse(res).description }); } finally { setIsGenerating(false); } } function handleSubmit(e) { e.preventDefault(); if (!doc.name.trim()) return; merge({ createdAt: Date.now() }); submit(); } function handleClaim(listing) { database.put({ ...listing, status: listing.status === "available" ? "taken" : "available" }); } const c = { bg: "bg-[#f5f3ee]", card: "bg-white", ink: "text-[#1a1830]", muted: "text-[#6b6880]", border: "border-[#1a1830]", shadow: "[box-shadow:4px_4px_0px_#1a1830]", shadowSm: "[box-shadow:3px_3px_0px_#1a1830]", shadowHov: "hover:[box-shadow:6px_6px_0px_#1a1830]", red: "bg-[#c2410c]", redText: "text-[#c2410c]", yellow: "bg-[#d4a017]", green: "bg-[#3d8f5f]", blue: "bg-[#3557a7]", btnPrimary: "bg-[#c2410c] text-white border-[#1a1830] border-[3px]", btnYellow: "bg-[#d4a017] text-[#1a1830] border-[#1a1830] border-[3px]", btnGhost: "bg-white text-[#1a1830] border-[#1a1830] border-[3px]", tag: "text-[0.65rem] uppercase tracking-[0.15em] font-bold px-2 py-0.5 border-[2px] border-[#1a1830]", }; const conditions = ["Like New", "Good", "Fair", "For Parts"]; return (

{/* Google Fonts */} {/* Ambient background */}

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

Give. Claim.
Automate.

Your neighborhood's marketplace for free robots, gadgets & automated devices.

{/* POST FORM */}

Post a Free Bot

Bot / Device Name merge({ name: e.target.value })} />

Condition

Description

merge({ description: e.target.value })}
              />
            </div>
            <div className="flex gap-3 flex-wrap">
              <button
                type="button"
                onClick={handleGenerate}
                disabled={isGenerating || !doc.name.trim()}
                className={`${c.btnYellow} rounded-[4px] px-4 py-2 text-[0.75rem] uppercase tracking-[0.05em] font-bold ${c.shadowSm} transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:[box-shadow:6px_6px_0px_#1a1830] active:translate-x-0.5 active:translate-y-0.5 active:[box-shadow:none] disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2`}
              >
                {isGenerating ? (
                  <>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ animation: "spin 0.8s linear infinite" }}>
                      <circle cx="8" cy="8" r="6" stroke="#1a1830" strokeWidth="3" strokeDasharray="28" strokeDashoffset="8" strokeLinecap="round" />
                    </svg>
                    Generating...
                  </>
                ) : (
                  <>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1a1830" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
                    </svg>
                    AI Description
                  </>
                )}
              </button>
              <button
                type="submit"
                disabled={!doc.name.trim()}
                className={`${c.btnPrimary} rounded-[4px] px-5 py-2 text-[0.75rem] uppercase tracking-[0.05em] font-bold text-white ${c.shadowSm} transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:[box-shadow:6px_6px_0px_#1a1830] active:translate-x-0.5 active:translate-y-0.5 active:[box-shadow:none] disabled:opacity-50 disabled:cursor-not-allowed`}
              >
                Post Free Bot
              </button>
            </div>
          </form>
        </div>

{/* LISTINGS */}
        <div className="flex items-center gap-3 mb-4">
          <span className={`${c.ink} font-bold uppercase tracking-tight text-sm`}>Available Bots</span>
          <div className={`flex-1 h-[3px] bg-[#1a1830]`} />
        </div>

{listings.length === 0 && (
          <div className={`${c.card} border-[3px] ${c.border} rounded-[4px] px-6 py-10 text-center ${c.muted} text-sm`}>
            No bots posted yet — be the first to give one away!
          </div>
        )}

<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
          {listings.map(listing => (
            <div
              key={listing._id}
              className={`${c.card} border-[3px] ${c.border} ${c.shadow} rounded-[4px] overflow-hidden transition-all duration-150 cursor-pointer ${listing.status === "taken" ? "opacity-60" : "hover:-translate-x-0.5 hover:-translate-y-0.5 hover:[box-shadow:6px_6px_0px_#1a1830]"}`}
              onClick={() => setSelected(selected === listing._id ? null : listing._id)}
            >
              <div className={`h-[4px] ${listing.status === "available" ? "bg-[#3d8f5f]" : "bg-[#6b6880]"}`} />
              <div className="p-4">
                <div className="flex items-start justify-between gap-2 mb-2">
                  <span className={`${c.ink} font-bold text-sm uppercase tracking-tight`}>{listing.name}</span>
                  <span className={`${c.tag} ${listing.status === "available" ? "bg-[#3d8f5f] text-white" : "bg-[#e5e3de] text-[#6b6880]"}`}>
                    {listing.status === "available" ? "Free" : "Taken"}
                  </span>
                </div>
                <div className="flex gap-2 mb-2">
                  <span className={`${c.tag} bg-white ${c.border}`}>{listing.condition}</span>
                </div>
                {listing.description && (
                  <p className={`${c.muted} text-xs leading-relaxed mb-3`}>{listing.description}</p>
                )}
                <div className="flex items-center justify-between">
                  <span className={`font-['JetBrains_Mono',monospace] text-[0.65rem] ${c.muted}`}>
                    {new Date(listing.createdAt).toLocaleDateString()}
                  </span>
                  <button
                    onClick={e => { e.stopPropagation(); handleClaim(listing); }}
                    className={`${listing.status === "available" ? c.btnPrimary : c.btnGhost} rounded-[4px] px-3 py-1.5 text-[0.7rem] uppercase tracking-[0.05em] font-bold ${c.shadowSm} transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:[box-shadow:5px_5px_0px_#1a1830] active:translate-x-0.5 active:translate-y-0.5 active:[box-shadow:none]`}
                  >
                    {listing.status === "available" ? "Claim It" : "Mark Available"}
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

<div className={`mt-10 text-center ${c.muted} text-[0.65rem] uppercase tracking-[0.15em]`}>
          Free Bots Swap — Keep the neighborhood automated
        </div>
      </div>
    </div>
  );
}</article></body></html>

Give. Claim.Automate.

Give. Claim.
Automate.