import React, { useState, useEffect } from "react" import { callAI } from "call-ai" import { ImgVibes } from "img-vibes" import { useFireproof } from "use-fireproof" export default function App() { const [view, setView] = useState("today") const [author, setAuthor] = useState("") const [text, setText] = useState("") const { database, useLiveQuery } = useFireproof("six-word-exhibit") const today = new Date().toISOString().split("T")[0] const [isSuggesting, setIsSuggesting] = useState(false) const { docs: allStories } = useLiveQuery("type", { key: "story", descending: true }) const filteredToday = allStories.filter(d => d.date === today) // Group stories by date for the archive const archiveGroups = allStories.reduce((acc, story) => { if (!acc[story.date]) acc[story.date] = [] acc[story.date].push(story) return acc }, {}) const sortedDates = Object.keys(archiveGroups).sort().reverse() async function handleSuggest() { setIsSuggesting(true) try { const resp = await callAI("Write a moody, evocative story about a forgotten key. It MUST be exactly six words long. No more, no less.", { schema: { properties: { story: { type: "string", description: "A six word story" } } } }) const data = JSON.parse(resp) setText(data.story) } finally { setIsSuggesting(false) } } function handleNav(newView) { setView(newView) } const currentWordCount = text.trim() === "" ? 0 : text.trim().split(/\s+/).length const isExactLength = currentWordCount === 6 async function handleSubmit(e) { e.preventDefault() if (!isExactLength || !author.trim()) return await database.put({ type: "story", date: today, author: author.trim(), text: text.trim(), createdAt: Date.now() }) setText("") } const c = { page: "min-h-screen flex flex-col items-center p-4 md:p-8 bg-[oklch(0.92_0.01_65)] text-[oklch(0.15_0.02_50)] font-sans", container: "w-full max-w-[800px] flex flex-col", header: "w-full flex flex-col md:flex-row justify-between items-start md:items-end py-6 mb-8 border-b border-[oklch(0.20_0.02_50)]", title: "font-serif font-bold text-3xl md:text-5xl tracking-tight", nav: "flex gap-6 mt-6 md:mt-0", navBtn: "text-[0.65rem] uppercase py-2 tracking-[0.12em] font-medium cursor-pointer text-[oklch(0.15_0.02_50)] hover:text-[oklch(0.35_0.04_50)] transition-colors", main: "w-full flex flex-col gap-16", promptBox: "w-full flex flex-col items-center justify-center py-16 px-4 border border-[oklch(0.20_0.02_50)] bg-[oklch(0.95_0.01_70)] text-center gap-6 shadow-sm", promptLabel: "text-[0.65rem] uppercase tracking-[0.12em] text-[oklch(0.55_0.02_50)]", promptText: "font-serif text-3xl md:text-5xl font-bold italic", formSection: "w-full max-w-[500px] mx-auto flex flex-col gap-8", form: "w-full flex flex-col gap-6", inputGroup: "w-full flex flex-col gap-2", label: "text-[0.65rem] uppercase tracking-[0.12em] text-[oklch(0.55_0.02_50)]", input: "w-full py-3 px-0 border-b border-[oklch(0.20_0.02_50)] focus:border-[oklch(0.15_0.02_50)] outline-none bg-transparent font-serif italic text-lg transition-colors rounded-none whitespace-normal", wordCount: "text-[0.65rem] text-right mt-1 font-medium tracking-widest uppercase", submitBtn: "w-full py-4 text-[0.65rem] uppercase tracking-[0.12em] mt-4 cursor-pointer bg-[oklch(0.35_0.04_50)] text-[oklch(0.95_0.01_70)] hover:bg-[oklch(0.25_0.03_50)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed border-none rounded-none font-bold", feed: "w-full flex flex-col", feedLabel: "text-[0.65rem] uppercase tracking-[0.12em] border-b border-[oklch(0.20_0.02_50)] pb-4 mb-4 text-[oklch(0.55_0.02_50)]", storyCard: "w-full flex flex-col gap-4 py-8 border-b border-[oklch(0.20_0.02_50)]", storyText: "font-serif text-2xl md:text-3xl leading-relaxed italic", storyMeta: "w-full flex justify-between items-center text-[0.65rem] uppercase tracking-[0.12em] text-[oklch(0.55_0.02_50)]", archiveList: "w-full flex flex-col gap-16", archiveDate: "text-[0.65rem] uppercase tracking-[0.12em] border-b border-[oklch(0.20_0.02_50)] pb-4 text-[oklch(0.55_0.02_50)]", aiBtn: "text-[0.65rem] uppercase tracking-[0.12em] text-[oklch(0.35_0.04_50)] hover:text-[oklch(0.15_0.02_50)] py-2 self-start cursor-pointer transition-colors mt-2 text-left" } return (

The Six-Word Exhibition

{view === "today" ? ( <>

Subject · {today}

"A Forgotten Key"

Contributions ({filteredToday.length})

{filteredToday.map(story => (

"{story.text}"

))} {filteredToday.length === 0 && (

The gallery is empty today. Be the first to hang your words.

)}

) : (

{sortedDates.length === 0 && (

The archives carry no history yet.

)} {sortedDates.map(date => (

Exhibition Date · {date}

{archiveGroups[date].map(story => (

"{story.text}"

))}

)}

) }

"A Forgotten Key"

Contributions (0)