import React from "react"; import { useFireproof } from "use-fireproof"; import { ImgGen, useImgGen, useViewer, useVibe } from "use-vibes"; import { Button, Heading, Icon, Input, Text } from "@vibes.diy/pouf"; const DB = "snackPlanets"; // The example wall: real planets made once with the image model, shipped as bundle files. const EXAMPLES = [ { slug: "donut", name: "Glazed Donut" }, { slug: "ramen", name: "Midnight Ramen" }, { slug: "pizza", name: "Pepperoni Pizza" }, { slug: "boba", name: "Brown Sugar Boba" }, { slug: "sushi", name: "Salmon Roll" }, { slug: "cottoncandy", name: "Cotton Candy" }, { slug: "pancake", name: "Syrup Stack" }, { slug: "taco", name: "Taco Tuesday" }, { slug: "watermelon", name: "Watermelon" }, { slug: "popcorn", name: "Movie Popcorn" }, { slug: "strawberry", name: "Strawberry Shortcake" }, { slug: "nachos", name: "Nacho Cheese" }, ]; const TONES = ["yellow", "mint", "blue", "orange", "purple", "pink"]; const IDEAS = ["Birthday cake", "Churros", "Dumplings", "Sundae"]; function planetPrompt(snack) { return `A tiny round planet floating in deep colorful outer space, playful glossy 3D toy render, vivid saturated colors, soft rim light, sparkling stars and a swirly nebula behind, centered, whimsical and delicious. The planet is made entirely of ${snack}, with landscapes, moons and rings built from its own ingredients. No text, no letters.`; } function publicUrl() { const label = location.hostname.split(".")[0]; const cut = label.indexOf("--"); if (cut < 0) return location.href; return `https://vibes.diy/vibe/${label.slice(cut + 2)}/${label.slice(0, cut)}`; } function Launcher({ database, snack, setSnack, onLaunched }) { const { viewer, isViewerPending, requestLogin } = useViewer(); const { can, me, ready } = useVibe(DB); const typed = snack.trim(); const draft = { type: "planet", snack: typed || "snack", authorHandle: me?.userHandle }; const verdict = can.create(draft); const settledSignedOut = !isViewerPending && !viewer; const canLaunch = ready && !verdict.pending && verdict.ok; async function launch(what) { const name = (what ?? typed).trim(); if (!name) return; setSnack(""); const { ok, id } = await database.put({ type: "planet", snack: name, prompt: planetPrompt(name), authorHandle: me?.userHandle, createdAt: Date.now(), }); if (ok === false) setSnack((now) => now || name); else onLaunched(id); } function pickIdea(idea) { if (canLaunch) launch(idea); else setSnack(idea); } function onSubmit(e) { e.preventDefault(); if (canLaunch) launch(); else if (settledSignedOut) requestLogin(); } const c = { form: "flex flex-col sm:flex-row sm:items-center gap-2 w-full bg-card text-card-foreground rounded-lg shadow-lg border border-border p-2", grow: "flex-1 min-w-0", chips: "flex flex-wrap gap-2 mt-3", chip: "shrink-0", }; let action; if (canLaunch) { action = ( ); } else if (settledSignedOut) { action = ( ); } else { action = ( ); } return (

{IDEAS.map((idea, i) => ( ))}

); } function ExampleTile({ example, onPick }) { const c = { tile: "relative block w-full overflow-hidden rounded-lg shadow-md bg-card transition-transform duration-200 hover:-translate-y-1 active:translate-y-0", img: "block w-full aspect-square object-cover", tag: "hidden sm:block absolute left-2 bottom-2 truncate rounded-sm bg-card text-card-foreground px-2 py-1 text-xs font-bold shadow-sm", }; return ( ); } // The feed shows planets whose picture is already drawn, so a visitor never waits on someone else's launch. function FeedPlanet({ planet, database }) { const { document: saved } = useImgGen({ _id: planet._id, database }); const hasPicture = Object.keys(saved?._files ?? {}).length > 0; if (!hasPicture) return null; return ; } function LaunchedPlanet({ planet, database, highlight }) { const c = { card: highlight ? "rounded-lg overflow-hidden bg-card text-card-foreground shadow-lg border border-border" : "rounded-lg overflow-hidden bg-card text-card-foreground shadow-md", frame: "w-full aspect-square", caption: "px-3 py-2 text-sm font-bold", }; return (

Planet {planet.snack}

); } export default function App() { const { database, useLiveQuery } = useFireproof(DB); const { docs } = useLiveQuery("type", { key: "planet", descending: true, limit: 24 }); const [snack, setSnack] = React.useState(""); const [justLaunched, setJustLaunched] = React.useState(null); const [copied, setCopied] = React.useState(false); const planets = [...docs].sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)); const fresh = planets.find((p) => p._id === justLaunched); function pickExample(name) { setSnack(name); window.scrollTo({ top: 0, behavior: "smooth" }); } async function copyLink() { try { await navigator.clipboard.writeText(publicUrl()); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch (e) { setCopied(false); } } const c = { page: "min-h-screen bg-background text-foreground font-sans", wrap: "max-w-6xl mx-auto px-4 py-4 sm:py-6 flex flex-col gap-4 sm:gap-6", head: "flex flex-col gap-1", title: "text-4xl sm:text-6xl font-bold tracking-tight", sub: "text-base text-muted-foreground", wall: "grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-2 sm:gap-3", section: "flex flex-col gap-3", sectionHead: "flex flex-wrap items-center justify-between gap-2", feed: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3", freshRow: "max-w-md w-full", }; return (

Snack Planets

Name a snack. We build you a whole tiny world out of it.

{fresh && (

)}

{EXAMPLES.map((ex) => ( ))}

Fresh from the launchpad

Every planet lands here for anyone with the link to visit. {planets.length > 0 ? (

{planets .filter((p) => p._id !== justLaunched) .map((p) => ( ))}

) : ( Be the first to launch a planet: tap a snack above. )}

); }