File size: 5,032 Bytes
624088c
 
f4dea7d
 
624088c
 
 
 
 
 
 
 
 
 
 
932a7fd
 
 
 
 
 
 
 
 
 
 
 
 
 
624088c
 
 
 
 
8c5d17c
624088c
8c5d17c
624088c
 
8c5d17c
624088c
8c5d17c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
624088c
8c5d17c
 
 
 
624088c
 
 
932a7fd
624088c
 
 
 
 
932a7fd
 
 
624088c
 
 
 
 
932a7fd
624088c
 
 
 
 
 
8c5d17c
 
 
 
 
624088c
f4dea7d
932a7fd
29e7afb
 
932a7fd
8c5d17c
624088c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
"use client"

import { useState } from "react"

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { cn } from "@/lib/utils"
import { FontName, fontList, fonts } from "@/lib/fonts"
import { Input } from "@/components/ui/input"
import { defaultPreset, getPreset, presets } from "@/app/engine/presets"
import { useStore } from "@/app/store"

export function TopMenu() {
  const font = useStore(state => state.font)
  const setFont = useStore(state => state.setFont)

  const preset = useStore(state => state.preset)
  const setPreset = useStore(state => state.setPreset)

  const prompt = useStore(state => state.prompt)
  const setPrompt = useStore(state => state.setPrompt)

  const atLeastOnePanelIsBusy = useStore(state => state.atLeastOnePanelIsBusy)

  const [draft, setDraft] = useState("")
  return (
    <div className={cn(
      `z-10 fixed top-0 left-0 right-0`,
      `flex flex-col md:flex-row w-full justify-between items-center`,
      `backdrop-blur-xl`,
      `transition-all duration-200 ease-in-out`,
      `px-2 py-2 border-b-1 border-gray-50 dark:border-gray-50`,
      `bg-stone-900/70 dark:bg-stone-900/70 text-gray-50 dark:text-gray-50`,
      `space-y-2 md:space-y-0 md:space-x-3 lg:space-x-6`
    )}>
      <div className="flex flex-row space-x-3">
        <div className={cn(
          `transition-all duration-200 ease-in-out`,
          `flex flex-row items-center justify-start space-x-3 font-mono w-1/2 md:w-auto`
          )}>
          <Label className="flex text-sm w-24">Preset:</Label>
          <Select
            defaultValue={defaultPreset}
            onValueChange={(value) => { setPreset(getPreset(value as FontName)) }}
            disabled={atLeastOnePanelIsBusy}
            >
            <SelectTrigger className="flex-grow">
              <SelectValue className="text-sm" placeholder="Type" />
            </SelectTrigger>
            <SelectContent>
              {Object.entries(presets).map(([key, preset]) =>
                <SelectItem key={key} value={key}>{preset.label}</SelectItem>
              )}
            </SelectContent>
          </Select>
        </div>
        <div className={cn(
          `transition-all duration-200 ease-in-out`,
          `flex flex-row items-center space-x-3 font-mono w-1/2 md:w-auto md:hidden`
        )}>
          <Label className="flex text-sm w-24">Font:</Label>
          <Select
            defaultValue={fontList.includes(preset.font) ? preset.font : "cartoonist"}
            onValueChange={(value) => { setFont(value as FontName) }}
            disabled={atLeastOnePanelIsBusy}
            >
            <SelectTrigger className="flex-grow">
              <SelectValue className="text-sm" placeholder="Type" />
            </SelectTrigger>
            <SelectContent>
              {Object.keys(fonts)
                .map((font) =>
                <SelectItem
                  key={font}
                  value={font}>{
                    font
                  }</SelectItem>
              )}
            </SelectContent>
          </Select>
        </div>
      </div>
      <div className={cn(
          `transition-all duration-200 ease-in-out`,
          `flex flex-row flex-grow items-center space-x-3 font-mono w-full md:w-auto`
        )}>
        <Input
          placeholder="Story"
          className="w-full bg-neutral-300 text-neutral-800 dark:bg-neutral-300 dark:text-neutral-800"
          disabled={atLeastOnePanelIsBusy}
          onChange={(e) => {
            setDraft(e.target.value)
          }}
          onBlur={(e) => {
            if (draft !== prompt) {
              if (draft.trim() !== prompt.trim()) {
                setPrompt(draft.trim())
              }
            }
          }}
          onKeyDown={({ key }) => {
            if (key === 'Enter') {
              if (draft.trim() !== prompt.trim()) {
                setPrompt(draft.trim())
              }
            }
          }}
          value={draft}
         />
      </div>
      <div className={cn(
          `transition-all duration-200 ease-in-out`,
          `hidden md:flex flex-row items-center space-x-3 font-mono w-full md:w-auto`
      )}>
        <Label className="flex text-sm w-24">Font:</Label>
        <Select
          defaultValue={fontList.includes(preset.font) ? preset.font : "actionman"}
          onValueChange={(value) => { setFont(value as FontName) }}
          // disabled={atLeastOnePanelIsBusy}
          disabled={true}
          >
          <SelectTrigger className="flex-grow">
            <SelectValue className="text-sm" placeholder="Type" />
          </SelectTrigger>
          <SelectContent>
            {Object.keys(fonts)
              .map((font) =>
              <SelectItem
                key={font}
                value={font}>{
                  font
                }</SelectItem>
            )}
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}