import React, { useState, useRef } from "react"; import { ImgVibes } from "img-vibes"; import { useFireproof } from "use-fireproof"; import { callAI } from "call-ai"; export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("golden-hour-archive"); const { doc, merge, submit } = useDocument({ type: "sunset", location: "", date: new Date().toISOString().slice(0, 10), time: "19:30", mood: "peaceful", description: "", prompt: "", }); const { docs: sunsets } = useLiveQuery("type", { key: "sunset", descending: true }); const [activeTab, setActiveTab] = useState("log"); const [selectedFile, setSelectedFile] = useState(null); const [isDragging, setIsDragging] = useState(false); const [isAnalyzing, setIsAnalyzing] = useState(false); const [selectedSunset, setSelectedSunset] = useState(null); const fileInputRef = useRef(null); const handleDrop = (e) => { e.preventDefault(); setIsDragging(false); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith("image/")) setSelectedFile(file); }; const handleFileChange = (e) => { const file = e.target.files[0]; if (file) setSelectedFile(file); }; const handleAnalyzeSky = async () => { if (!doc.location) return; setIsAnalyzing(true); try { const prompt = `You are a poetic nature writer. Write a vivid 2-sentence description of a golden hour sunset${doc.location ? ` over ${doc.location}` : ""}${doc.time ? ` at ${doc.time}` : ""}. Mood: ${doc.mood}. Focus on light, color, and atmosphere.`; const result = JSON.parse(await callAI(prompt, { schema: { properties: { description: { type: "string" } } } })); merge({ description: result.description, prompt: `Golden hour sunset over ${doc.location}, ${doc.mood} mood, ${doc.time}` }); } finally { setIsAnalyzing(false); } }; const handleSubmit = async (e) => { e.preventDefault(); if (selectedFile) { const docToSave = { ...doc, _files: { photo: selectedFile } }; await database.put(docToSave); merge({ location: "", date: new Date().toISOString().slice(0, 10), time: "19:30", mood: "peaceful", description: "", prompt: "" }); setSelectedFile(null); } else { submit(e); } setActiveTab("gallery"); }; const moods = ["peaceful", "dramatic", "melancholy", "electric", "golden", "stormy"]; const c = { bg: "bg-[#f5f0e8]", card: "bg-[#ffffff]", ink: "text-[#0f172a]", muted: "text-[#50505a]", border: "border-[#0f172a]", shadow: "shadow-[4px_4px_0px_#0f172a]", shadowSm: "shadow-[3px_3px_0px_#0f172a]", accent: "bg-[#c2410c]", accentText: "text-[#ffffff]", yellow: "bg-[#d97706]", yellowLight: "bg-[#fbbf24]", green: "bg-[#4d7c0f]", blue: "bg-[#1d4ed8]", btnPrimary: "bg-[#c2410c] text-white border-[3px] border-[#0f172a] shadow-[4px_4px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[6px_6px_0px_#0f172a] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150", btnSecondary: "bg-[#fbbf24] text-[#0f172a] border-[3px] border-[#0f172a] shadow-[3px_3px_0px_#0f172a] hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[5px_5px_0px_#0f172a] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150", input: "bg-white border-[3px] border-[#0f172a] rounded-[4px] px-3 py-2 text-[#0f172a] focus:outline-none focus:translate-x-[-2px] focus:translate-y-[-2px] focus:shadow-[4px_4px_0px_#0f172a] transition-all duration-150 w-full", }; return (

{/* NAV */}

Golden Hour Archive

{["log", "gallery"].map(tab => ( ))}

{/* HERO */}

Golden Hour Archive

Daily sunset timelapse journal — capture, describe, archive every golden moment.

{/* STATS ROW */}

{[ { label: "Total Sunsets", val: sunsets.length, color: "bg-[#c2410c]", textCol: "text-white" }, { label: "This Month", val: sunsets.filter(s => s.date?.slice(0,7) === new Date().toISOString().slice(0,7)).length, color: "bg-[#d97706]", textCol: "text-[#0f172a]" }, { label: "With Photos", val: sunsets.filter(s => s.prompt).length, color: "bg-[#1d4ed8]", textCol: "text-white" }, { label: "Moods Logged", val: new Set(sunsets.map(s => s.mood).filter(Boolean)).size, color: "bg-[#4d7c0f]", textCol: "text-[#0f172a]" }, ].map(({ label, val, color, textCol }) => (

{label}

{val}

))}

{activeTab === "log" && (

Log New Sunset

Location merge({ location: e.target.value })} />

Date merge({ date: e.target.value })} />

Sunset Time merge({ time: e.target.value })} />

Mood

{/* Drop Zone */}

Sunset Photo

fileInputRef.current?.click()} onDragOver={e => { e.preventDefault(); setIsDragging(true); }} onDragLeave={() => setIsDragging(false)} onDrop={handleDrop} className={`border-[3px] border-dashed border-[#0f172a] rounded-[4px] p-6 text-center cursor-pointer transition-all duration-150 ${isDragging ? "bg-[#fbbf24]" : selectedFile ? "bg-[#f0fdf4]" : "bg-white hover:bg-[#fef9ec]"}`}> {selectedFile ? (

{selectedFile.name}

Click to change

) : (

Drag & drop or click to upload

JPG, PNG, HEIC

)}

{/* AI Description */}

Sky Description

merge({ description: e.target.value })} />
              </div>

<button type="submit" className={`${c.btnPrimary} px-6 py-3 text-[0.8rem] uppercase tracking-[0.08em] font-bold rounded-[4px] flex items-center gap-2`}>
                <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
                Archive Sunset
              </button>
            </form>
          </div>
        )}

{activeTab === "gallery" && (
          <div>
            {sunsets.length === 0 ? (
              <div className={`${c.card} border-[3px] ${c.border} rounded-[4px] ${c.shadow} p-12 text-center`}>
                <svg viewBox="0 0 24 24" className="w-12 h-12 mx-auto mb-4 text-[#50505a]" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
                <p className="text-[0.9rem] font-bold uppercase tracking-[0.05em] text-[#0f172a]">No sunsets archived yet</p>
                <p className="text-[0.75rem] text-[#50505a] mt-1">Log your first golden hour moment</p>
                <button onClick={() => setActiveTab("log")} className={`${c.btnPrimary} mt-4 px-5 py-2 text-[0.75rem] uppercase tracking-[0.08em] font-bold rounded-[4px] inline-block`}>
                  Log First Sunset
                </button>
              </div>
            ) : (
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                {sunsets.map(sunset => (
                  <div key={sunset._id}
                    onClick={() => setSelectedSunset(selectedSunset?._id === sunset._id ? null : sunset)}
                    className={`${c.card} border-[3px] ${c.border} rounded-[4px] ${c.shadow} overflow-hidden cursor-pointer hover:translate-x-[-2px] hover:translate-y-[-2px] hover:shadow-[6px_6px_0px_#0f172a] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all duration-150`}>
                    {sunset.prompt ? (
                      <div className="w-full h-48 overflow-hidden border-b-[3px] border-[#0f172a]">
                        <ImgVibes _id={sunset._id} database={database} showControls={false}
                          className="w-full h-full object-cover" style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }} />
                      </div>
                    ) : (
                      <div className="w-full h-32 bg-gradient-to-b from-[#c2410c] via-[#d97706] to-[#1d4ed8] border-b-[3px] border-[#0f172a] flex items-center justify-center">
                        <svg viewBox="0 0 24 24" className="w-10 h-10 text-white opacity-60" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/></svg>
                      </div>
                    )}
                    <div className="p-4">
                      <div className="flex items-center justify-between mb-2">
                        <span className="font-bold text-[0.85rem] text-[#0f172a] uppercase tracking-[0.03em]">
                          {sunset.location || "Unknown Location"}
                        </span>
                        <span className={`text-[0.6rem] uppercase tracking-[0.1em] font-bold px-2 py-0.5 border-[2px] border-[#0f172a] rounded-[4px]
                          ${sunset.mood === "dramatic" ? "bg-[#c2410c] text-white" : sunset.mood === "peaceful" ? "bg-[#4d7c0f] text-white" : sunset.mood === "electric" ? "bg-[#1d4ed8] text-white" : "bg-[#fbbf24] text-[#0f172a]"}`}>
                          {sunset.mood}
                        </span>
                      </div>
                      <div className="flex items-center gap-3 mb-2">
                        <span className="font-['JetBrains_Mono',monospace] text-[0.75rem] text-[#50505a]">{sunset.date}</span>
                        <span className="font-['JetBrains_Mono',monospace] text-[0.75rem] text-[#50505a]">{sunset.time}</span>
                      </div>
                      {sunset.description && (
                        <p className={`text-[0.78rem] text-[#50505a] leading-relaxed ${selectedSunset?._id === sunset._id ? "" : "line-clamp-2"}`}>
                          {sunset.description}
                        </p>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}</article></body></html>