"use client" import { useEffect, useState } from "react" import { useSearchParams } from "next/navigation" import Image from "next/image" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { cn } from "@/lib/utils" import { FontName, defaultFont } from "@/lib/fonts" import { Input } from "@/components/ui/input" import { PresetName, defaultPreset, nonRandomPresets, presets } from "@/app/engine/presets" import { useStore } from "@/app/store" import { Button } from "@/components/ui/button" import { LayoutName, allLayoutLabels, defaultLayout, nonRandomLayouts } from "@/app/layouts" import layoutPreview0 from "../../../../public/layouts/layout0.jpg" import layoutPreview1 from "../../../../public/layouts/layout1.jpg" import layoutPreview2 from "../../../../public/layouts/layout2.jpg" import layoutPreview3 from "../../../../public/layouts/layout3.jpg" import { StaticImageData } from "next/image" import { Switch } from "@/components/ui/switch" const layoutIcons: Partial> = { Layout0: layoutPreview0, Layout1: layoutPreview1, Layout2: layoutPreview2, Layout3: layoutPreview3, Layout4: undefined, } export function TopMenu() { // const font = useStore(state => state.font) // const setFont = useStore(state => state.setFont) const preset = useStore(state => state.preset) const prompt = useStore(state => state.prompt) const layout = useStore(state => state.layout) const setLayout = useStore(state => state.setLayout) const setShowCaptions = useStore(state => state.setShowCaptions) const showCaptions = useStore(state => state.showCaptions) const generate = useStore(state => state.generate) const isGeneratingStory = useStore(state => state.isGeneratingStory) const atLeastOnePanelIsBusy = useStore(state => state.atLeastOnePanelIsBusy) const isBusy = isGeneratingStory || atLeastOnePanelIsBusy const searchParams = useSearchParams() const requestedPreset = (searchParams?.get('preset') as PresetName) || defaultPreset const requestedFont = (searchParams?.get('font') as FontName) || defaultFont const requestedPrompt = (searchParams?.get('prompt') as string) || "" const requestedLayout = (searchParams?.get('layout') as LayoutName) || defaultLayout const [draftPromptA, setDraftPromptA] = useState(requestedPrompt) const [draftPromptB, setDraftPromptB] = useState(requestedPrompt) const draftPrompt = `${draftPromptA}||${draftPromptB}` const [draftPreset, setDraftPreset] = useState(requestedPreset) const [draftLayout, setDraftLayout] = useState(requestedLayout) const handleSubmit = () => { const promptChanged = draftPrompt.trim() !== prompt.trim() const presetChanged = draftPreset !== preset.id const layoutChanged = draftLayout !== layout if (!isBusy && (promptChanged || presetChanged || layoutChanged)) { generate(draftPrompt, draftPreset, draftLayout) } } useEffect(() => { const layoutChanged = draftLayout !== layout if (layoutChanged && !isBusy) { setLayout(draftLayout) } }, [layout, draftLayout, isBusy]) return (
{/* */}
{/* */}
{/*
*/}
{ setDraftPromptB(e.target.value) }} onKeyDown={({ key }) => { if (key === 'Enter') { handleSubmit() } }} value={draftPromptB} /> { setDraftPromptA(e.target.value) }} onKeyDown={({ key }) => { if (key === 'Enter') { handleSubmit() } }} value={draftPromptA} />
{/* Let's add this feature later, because right now people are confused about why they can't activate it
*/}
) }