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