1import { Command } from 'cmdk';
2
3import type { AlgoliaItemType } from '../types';
4import { getContentHighlightHTML, getHighlightHTML, openLink } from '../utils';
5import { FootnoteSection } from './FootnoteSection';
6import { ExternalLinkIcon, ReactIcon } from './icons';
7
8import { CALLOUT, CAPTION, FOOTNOTE } from '~/ui/components/Text';
9
10type Props = {
11  item: AlgoliaItemType;
12  onSelect?: () => void;
13};
14
15export const RNDocsItem = ({ item, onSelect }: Props) => {
16  const { lvl0, lvl1, lvl2, lvl3, lvl4 } = item.hierarchy;
17  return (
18    <Command.Item
19      value={`rn-${item.objectID}`}
20      onSelect={() => {
21        openLink(item.url, true);
22        onSelect && onSelect();
23      }}>
24      <div className="inline-flex gap-3 items-center">
25        <ReactIcon className="shrink-0" />
26        <div>
27          {lvl4 && (
28            <>
29              <CALLOUT weight="medium" {...getHighlightHTML(item, 'lvl4')} />
30              <CAPTION theme="quaternary">
31                <span {...getHighlightHTML(item, 'lvl0')} />
32                <FootnoteSection item={item} levelKey="lvl1" />
33                <FootnoteSection item={item} levelKey="lvl2" />
34                <FootnoteSection item={item} levelKey="lvl3" />
35              </CAPTION>
36            </>
37          )}
38          {!lvl4 && lvl3 && (
39            <>
40              <CALLOUT weight="medium" {...getHighlightHTML(item, 'lvl3')} />
41              <CAPTION theme="quaternary">
42                <span {...getHighlightHTML(item, 'lvl0')} />
43                <FootnoteSection item={item} levelKey="lvl1" />
44                <FootnoteSection item={item} levelKey="lvl2" />
45              </CAPTION>
46            </>
47          )}
48          {!lvl3 && lvl2 && (
49            <>
50              <CALLOUT weight="medium" {...getHighlightHTML(item, 'lvl2')} />
51              <CAPTION theme="quaternary">
52                <span {...getHighlightHTML(item, 'lvl0')} />
53                <FootnoteSection item={item} levelKey="lvl1" />
54              </CAPTION>
55            </>
56          )}
57          {!lvl3 && !lvl2 && lvl1 && (
58            <>
59              <CALLOUT weight="medium" {...getHighlightHTML(item, 'lvl1')} />
60              <CAPTION theme="quaternary" {...getHighlightHTML(item, 'lvl0')} />
61            </>
62          )}
63          {!lvl3 && !lvl2 && !lvl1 && lvl0 && (
64            <CALLOUT weight="medium" {...getHighlightHTML(item, 'lvl0')} />
65          )}
66          <FOOTNOTE theme="secondary" {...getContentHighlightHTML(item, true)} />
67        </div>
68        <ExternalLinkIcon />
69      </div>
70    </Command.Item>
71  );
72};
73