Search.tsx

import React, { Fragment, useState } from "react";

import { InstantSearch, Configure } from "react-instantsearch-dom";

import Autocomplete from "./search/autocomplete";
import { Dialog, Transition } from "@headlessui/react";
import { SearchIcon } from "@heroicons/react/outline";
// @ts-ignore
import typesenseAdapter from "../../typesense";

interface Props {}

const Search = (props: Props) => {
  const searchClient = typesenseAdapter.searchClient;
  // @ts-ignore
  const [query, setQuery] = useState("");
  const [searchBarActive, setSearchBarActive] = useState(false);
  const [open, setOpen] = useState(false);

  return (
    <>
      <section className="my-4 flex w-full">
        <button
          onClick={() => {
            setOpen(!open);
          }}
          type="submit"
          className="z-50 px-4 outline-none focus:outline-none active:outline-none"
        >
          <SearchIcon
            className="h-6 w-6 dark:text-gray-200"
            aria-hidden="true"
          />
        </button>
      </section>
      <Transition.Root
        show={open}
        as={Fragment}
        afterLeave={() => setQuery("")}
      >
        <Dialog
          as="div"
          className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20"
          onClose={setOpen}
        >
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-300"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity blur" />
          </Transition.Child>

          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0 scale-95"
            enterTo="opacity-100 scale-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100 scale-100"
            leaveTo="opacity-0 scale-95"
          >
            <section className="my-4 flex justify-center">
              <InstantSearch searchClient={searchClient} indexName="pages_v1">
                <Configure hitsPerPage={5} />
                <Autocomplete
                  // @ts-ignore
                  onSuggestionSelected={setQuery}
                  onSuggestionCleared={setQuery}
                />
                <button
                  type="submit"
                  className="-mx-10 z-50 outline-none focus:outline-none active:outline-none dark:color-gray-100 dark:border-gray-100"
                >
                  <SearchIcon
                    className="h-6 w-6 dark:color-gray-100 dark:border-gray-100"
                    aria-hidden="true"
                  />
                </button>
              </InstantSearch>
            </section>
          </Transition.Child>
        </Dialog>
      </Transition.Root>
    </>
  );
};

export default Search;