{config.title}

{config.subtitle}

{config.dataNote}

New prompt

Category Prompt

setText(event.target.value)} placeholder="Write it the way a person would ask" />
            </label>
            {tooShort && <p className="warn">{count} words. Aim for at least {config.minWords}.</p>}
            {tooClose && <p className="warn">Too close to: "{closest.prompt?.text}"</p>}
            <button className="btn btn--p" disabled={!text.trim() || tooClose} onClick={add}>Add prompt</button>
          </section>
          <section className="card">
            <div className="row row--between">
              <h2>{shown.length} prompts</h2>
              <div className="row">
                <select aria-label="Show category" value={show} onChange={(event) => setShow(event.target.value)}>
                  <option value="">All categories</option>
                  {config.categories.map((name: string) => <option key={name}>{name}</option>)}
                </select>
                <button className="btn" onClick={() => download('prompts.csv', toCsv(prompts as unknown as Record<string, unknown>[]))}>Export CSV</button>
              </div>
            </div>
            <ul className="plain" data-ypai-edit="prompts">
              {shown.map((prompt) => (
                <li key={prompt.text} className="p">
                  <span className="tag">{prompt.category}</span>
                  <span className="grow">{prompt.text}</span>
                  <button className="btn" onClick={() => setPrompts((list) => list.filter((x) => x !== prompt))}>Remove</button>
                </li>
              ))}
            </ul>
          </section>
        </div>
        <aside className="card">
          <h2>Coverage</h2>
          <ul className="plain" data-ypai-edit="categories">
            {config.categories.map((name: string) => {
              const have = prompts.filter((prompt) => prompt.category === name).length;
              return (
                <li key={name} className="stack" style={{ gap: 4 }}>
                  <div className="row row--between"><span>{name}</span><span className={have >= config.targetPerCategory ? 'tag tag--ok' : 'tag tag--warn'}>{have} of {config.targetPerCategory}</span></div>
                  <div className="bar"><i style={{ width: `${Math.min(100, (have / config.targetPerCategory) * 100)}%` }} /></div>
                </li>
              );
            })}
          </ul>
        </aside>
      </div>
    </main>
  );
}
</article></body></html>

Cookies