import React, { useState } from "react"; import { callAI } from "call-ai"; import { ImgVibes } from "img-vibes"; import { useFireproof } from "use-fireproof"; const CATEGORIES = ["Breakfast", "Lunch", "Dinner", "Dessert", "Snack", "Drink", "Other"]; function Spinner() { return ( ); } export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("recipe-keeper-vault"); const { doc, merge, submit, reset } = useDocument({ type: "recipe", title: "", category: "Dinner", ingredients: "", instructions: "", prepTime: "", cookTime: "", servings: "", createdAt: Date.now(), }); const { docs: recipes } = useLiveQuery("type", { key: "recipe", descending: true }); const [view, setView] = useState("list"); // list | form | detail const [selected, setSelected] = useState(null); const [isEnhancing, setIsEnhancing] = useState(false); const [isSaving, setIsSaving] = useState(false); const [search, setSearch] = useState(""); const [filterCat, setFilterCat] = useState("All"); async function handleEnhance() { if (!doc.title && !doc.ingredients && !doc.instructions) return; setIsEnhancing(true); try { const prompt = `You are a recipe editor. Given this family recipe, clean up and enhance the ingredients list and instructions. Return structured JSON. Title: ${doc.title} Ingredients: ${doc.ingredients} Instructions: ${doc.instructions} Also estimate prepTime (e.g. "15 min"), cookTime (e.g. "30 min"), servings (e.g. "4").`; const res = JSON.parse(await callAI(prompt, { schema: { properties: { ingredients: { type: "string", description: "Cleaned ingredients, one per line" }, instructions: { type: "string", description: "Step-by-step instructions, numbered" }, prepTime: { type: "string" }, cookTime: { type: "string" }, servings: { type: "string" }, }, }, })); merge({ ingredients: res.ingredients || doc.ingredients, instructions: res.instructions || doc.instructions, prepTime: res.prepTime || doc.prepTime, cookTime: res.cookTime || doc.cookTime, servings: res.servings || doc.servings, }); } finally { setIsEnhancing(false); } } async function handleSave(e) { e.preventDefault(); if (!doc.title.trim()) return; setIsSaving(true); try { await database.put({ ...doc, createdAt: doc._id ? doc.createdAt : Date.now() }); reset(); setView("list"); } finally { setIsSaving(false); } } function openDetail(recipe) { setSelected(recipe); setView("detail"); } function startAdd() { reset(); setView("form"); } const filtered = recipes.filter((r) => { const matchSearch = r.title?.toLowerCase().includes(search.toLowerCase()); const matchCat = filterCat === "All" || r.category === filterCat; return matchSearch && matchCat; }); const c = { bg: "bg-[oklch(0.96_0.01_90)]", card: "bg-white border-[3px] border-[#0f172a]", shadow: "shadow-[4px_4px_0px_#0f172a]", shadowSm: "shadow-[3px_3px_0px_#0f172a]", ink: "text-[#0f172a]", muted: "text-[#6b7280]", red: "bg-[oklch(0.55_0.24_28)]", yellow: "bg-[oklch(0.85_0.18_85)]", green: "bg-[oklch(0.62_0.19_145)]", blue: "bg-[oklch(0.52_0.18_255)]", redText: "text-[oklch(0.55_0.24_28)]", border: "border-[#0f172a]", input: "bg-white border-[3px] border-[#0f172a] rounded-[4px] w-full px-3 py-2 text-[#0f172a] text-sm font-[Space_Grotesk] outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0px_#0f172a] transition-all duration-150", btnPrimary: "bg-[oklch(0.55_0.24_28)] text-white border-[3px] border-[#0f172a] rounded-[4px] px-4 py-2 text-xs uppercase tracking-widest font-bold shadow-[4px_4px_0px_#0f172a] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#0f172a] active:translate-x-0.5 active:translate-y-0.5 active:shadow-none transition-all duration-150 disabled:opacity-50", btnSecondary: "bg-[oklch(0.85_0.18_85)] text-[#0f172a] border-[3px] border-[#0f172a] rounded-[4px] px-4 py-2 text-xs uppercase tracking-widest font-bold shadow-[3px_3px_0px_#0f172a] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#0f172a] active:translate-x-0.5 active:translate-y-0.5 active:shadow-none transition-all duration-150 disabled:opacity-50", btnGhost: "bg-white text-[#0f172a] border-[3px] border-[#0f172a] rounded-[4px] px-4 py-2 text-xs uppercase tracking-widest font-bold hover:shadow-[3px_3px_0px_#0f172a] active:shadow-none transition-all duration-150", }; const catColors = ["bg-[oklch(0.55_0.24_28)] text-white", "bg-[oklch(0.85_0.18_85)] text-[#0f172a]", "bg-[oklch(0.52_0.18_255)] text-white", "bg-[oklch(0.62_0.19_145)] text-[#0f172a]"]; return (

{/* Floating shapes */}

{/* NAV */} {/* LIST VIEW */} {view === "list" && (

{/* Hero */}

Family Recipe Vault

Your Kitchen
Heritage

{recipes.length} recipe{recipes.length !== 1 ? "s" : ""} saved. Add, enhance, and share family favorites.

{/* Search + Filter */}

setSearch(e.target.value)} />

{/* Recipe Grid */} {filtered.length === 0 ? (

No recipes yet

) : (

{filtered.map((recipe, i) => ( ))}

)}

)} {/* FORM VIEW */} {view === "form" && (

New Recipe

Recipe Title * merge({ title: e.target.value })} required />

Category

Servings merge({ servings: e.target.value })} />

Prep Time merge({ prepTime: e.target.value })} />

Cook Time merge({ cookTime: e.target.value })} />

Ingredients

merge({ ingredients: e.target.value })} />
                </div>
                <div className="sm:col-span-2">
                  <label className="block text-[0.6rem] uppercase tracking-[0.15em] text-[#6b7280] mb-1">Instructions</label>
                  <textarea className={`${c.input} resize-none`} rows={6} placeholder={"1. Preheat oven...\n2. Mix dry ingredients..."} value={doc.instructions} onChange={(e) => merge({ instructions: e.target.value })} />
                </div>
              </div>
              <div className="flex flex-wrap gap-3 pt-2">
                <button type="button" onClick={handleEnhance} disabled={isEnhancing} className={`${c.btnSecondary} flex items-center gap-2`}>
                  {isEnhancing ? <><Spinner /> Enhancing...</> : <><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="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.6L12 2z"/></svg> Enhance with AI</>}
                </button>
                <button type="submit" disabled={isSaving} className={`${c.btnPrimary} flex items-center gap-2`}>
                  {isSaving ? <><Spinner /> Saving...</> : <>Save Recipe</>}
                </button>
                <button type="button" onClick={() => setView("list")} className={c.btnGhost}>Cancel</button>
              </div>
            </form>
          </div>
        )}

{/* DETAIL VIEW */}
        {view === "detail" && selected && (
          <div>
            <button onClick={() => setView("list")} className={`${c.btnGhost} mb-5 flex items-center gap-2`}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
              Back
            </button>
            <div className={`${c.card} ${c.shadow} rounded-[4px] overflow-hidden`}>
              <div className="flex h-1.5">
                <div className="flex-1 bg-[oklch(0.55_0.24_28)]" />
                <div className="flex-1 bg-[oklch(0.85_0.18_85)]" />
                <div className="flex-1 bg-[oklch(0.62_0.19_145)]" />
                <div className="flex-1 bg-[oklch(0.52_0.18_255)]" />
              </div>

<div className="grid grid-cols-1 sm:grid-cols-2">
                <div className="border-b-[3px] sm:border-b-0 sm:border-r-[3px] border-[#0f172a] overflow-hidden min-h-[240px]">
                  <ImgVibes
                    prompt={`Appetizing food photo of ${selected.title}, a ${selected.category} dish, professional kitchen photography, warm lighting`}
                    className="w-full h-full object-cover"
                    style={{ minHeight: 240, display: "block" }}
                  />
                </div>
                <div className="p-6">
                  <p className="text-[0.6rem] uppercase tracking-[0.15em] text-[#6b7280] mb-1">{selected.category}</p>
                  <h2 className="text-2xl font-black uppercase tracking-tight text-[#0f172a] leading-tight mb-4">{selected.title}</h2>
                  <div className="flex flex-wrap gap-3 font-[JetBrains_Mono] text-xs">
                    {selected.prepTime && <div className={`bg-white border-[2px] border-[#0f172a] rounded-[4px] px-3 py-1.5 shadow-[2px_2px_0px_#0f172a]`}><span className="text-[#6b7280] uppercase block text-[0.55rem] tracking-widest">Prep</span>{selected.prepTime}</div>}
                    {selected.cookTime && <div className={`bg-white border-[2px] border-[#0f172a] rounded-[4px] px-3 py-1.5 shadow-[2px_2px_0px_#0f172a]`}><span className="text-[#6b7280] uppercase block text-[0.55rem] tracking-widest">Cook</span>{selected.cookTime}</div>}
                    {selected.servings && <div className={`bg-white border-[2px] border-[#0f172a] rounded-[4px] px-3 py-1.5 shadow-[2px_2px_0px_#0f172a]`}><span className="text-[#6b7280] uppercase block text-[0.55rem] tracking-widest">Serves</span>{selected.servings}</div>}
                  </div>
                </div>
              </div>

<div className="grid grid-cols-1 sm:grid-cols-2 border-t-[3px] border-[#0f172a]">
                <div className="p-6 border-b-[3px] sm:border-b-0 sm:border-r-[3px] border-[#0f172a]">
                  <p className="text-[0.6rem] uppercase tracking-[0.15em] text-[#6b7280] mb-3 font-bold">Ingredients</p>
                  <pre className="font-[Space_Grotesk] text-sm text-[#0f172a] whitespace-pre-wrap leading-relaxed">{selected.ingredients || "No ingredients listed."}</pre>
                </div>
                <div className="p-6">
                  <p className="text-[0.6rem] uppercase tracking-[0.15em] text-[#6b7280] mb-3 font-bold">Instructions</p>
                  <pre className="font-[Space_Grotesk] text-sm text-[#0f172a] whitespace-pre-wrap leading-relaxed">{selected.instructions || "No instructions listed."}</pre>
                </div>
              </div>

<div className="p-6 border-t-[3px] border-[#0f172a] flex gap-3 flex-wrap">
                <button
                  onClick={() => database.del(selected._id).then(() => setView("list"))}
                  className={`${c.btnGhost} flex items-center gap-2 text-[oklch(0.55_0.24_28)] border-[oklch(0.55_0.24_28)]`}
                >
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
                  Delete Recipe
                </button>
                <p className="font-[JetBrains_Mono] text-xs text-[#6b7280] self-center ml-auto">
                  Added {new Date(selected.createdAt).toLocaleDateString()}
                </p>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}</article></body></html>

Your Kitchen Heritage

{recipe.title}

Your Kitchen
Heritage

Your KitchenHeritage

Your Kitchen
Heritage