NavigationCommands.tsx

/** @jsx createElement */
import type { AutocompleteRenderer } from '@algolia/autocomplete-js';
import {
  createElement as preactCreateElement,
  Fragment as PreactFragment,
} from 'preact';

type NavigationCommandsTranslations = {
  toSelect: string;
  toNavigate: string;
  toClose: string;
};

const defaultTranslations: NavigationCommandsTranslations = {
  toSelect: 'to select',
  toNavigate: 'to navigate',
  toClose: 'to close',
};

export type NavigationCommandsProps = {
  translations?: NavigationCommandsTranslations;
};

export function createNavigationCommandsComponent({
  createElement,
}: AutocompleteRenderer) {
  return function NavigationCommands({
    translations = defaultTranslations,
  }: NavigationCommandsProps): JSX.Element {
    return (
      <div className="aa-NavigationCommands">
        <ul className="aa-NavigationCommandList">
          <li className="aa-NavigationCommandListItem">
            <span className="aa-Key">
              <svg width="15" height="15">
                <g
                  fill="none"
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="1.2"
                >
                  <path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3" />
                </g>
              </svg>
            </span>
            <span className="aa-NavigationCommandLabel">
              {translations.toSelect}
            </span>
          </li>
          <li className="aa-NavigationCommandListItem">
            <span className="aa-Key">
              <svg width="15" height="15">
                <g
                  fill="none"
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="1.2"
                >
                  <path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3" />
                </g>
              </svg>
            </span>
            <span className="aa-Key">
              <svg width="15" height="15">
                <g
                  fill="none"
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="1.2"
                >
                  <path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3" />
                </g>
              </svg>
            </span>
            <span className="aa-NavigationCommandLabel">
              {translations.toNavigate}
            </span>
          </li>
          <li className="aa-NavigationCommandListItem">
            <span className="aa-Key">
              <svg width="15" height="15">
                <g
                  fill="none"
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="1.2"
                >
                  <path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956" />
                </g>
              </svg>
            </span>
            <span className="aa-NavigationCommandLabel">
              {translations.toClose}
            </span>
          </li>
        </ul>
      </div>
    );
  };
}

export const NavigationCommands = createNavigationCommandsComponent({
  createElement: preactCreateElement,
  Fragment: PreactFragment,
});