Function SearchDialog

packages/web/src/render.tsx:1404–1456

(props: { items: SearchIndexItem[] })

}

function SearchDialog(props: { items: SearchIndexItem[] }) {
  const json = JSON.stringify(props.items).replace(/</g, "\\u003c");

  return (
    <dialog
      id="search-modal"
      class="search-modal"
      aria-labelledby="search-modal-title"
    >
      <div class="search-field">
        <svg
          class="search-field-icon"
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <circle cx="11" cy="11" r="8"></circle>
          <path d="m21 21-4.35-4.35"></path>
        </svg>
        <input
          id="search-input"
          type="text"
          placeholder="Search models, providers, and labs"
          autocomplete="off"
          spellcheck="false"
          role="combobox"
          aria-expanded="true"
          aria-controls="search-results"
          aria-autocomplete="list"
        />
        <span class="search-escape">Esc</span>
      </div>
      <h2 id="search-modal-title" class="sr-only">
        Search
      </h2>
      <div id="search-count" class="search-count"></div>
      <div id="search-results" class="search-results" role="listbox"></div>
      <p id="search-empty" class="search-empty">No matching results.</p>
      <script
        id="search-index"
        type="application/json"
        dangerouslySetInnerHTML={{ __html: json }}
      />
    </dialog>
  );
}

function HelpDialog() {
  return (