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';
7import { itemStyle, contentStyle, footnoteStyle, itemIconWrapperStyle } from './styles';
8
9import { CALLOUT, FOOTNOTE } from '~/ui/components/Text';
10
11type Props = {
12  item: AlgoliaItemType;
13  onSelect?: () => void;
14};
15
16export const RNDocsItem = ({ item, onSelect }: Props) => {
17  const { lvl0, lvl1, lvl2, lvl3, lvl4 } = item.hierarchy;
18  return (
19    <Command.Item
20      value={`rn-${item.objectID}`}
21      onSelect={() => {
22        openLink(item.url, true);
23        onSelect && onSelect();
24      }}>
25      <div css={itemStyle}>
26        <div css={itemIconWrapperStyle}>
27          <ReactIcon />
28        </div>
29        <div>
30          {lvl4 && (
31            <>
32              <CALLOUT weight="medium" {...getHighlightHTML(item, 'lvl4')} />
33              <FOOTNOTE css={footnoteStyle}>
34                <span {...getHighlightHTML(item, 'lvl0')} />
35                <FootnoteSection item={item} levelKey="lvl1" />
36                <FootnoteSection item={item} levelKey="lvl2" />
37                <FootnoteSection item={item} levelKey="lvl3" />
38              </FOOTNOTE>
39            </>
40          )}
41          {!lvl4 && lvl3 && (
42            <>
43              <CALLOUT weight="medium" {...getHighlightHTML(item, 'lvl3')} />
44              <FOOTNOTE css={footnoteStyle}>
45                <span {...getHighlightHTML(item, 'lvl0')} />
46                <FootnoteSection item={item} levelKey="lvl1" />
47                <FootnoteSection item={item} levelKey="lvl2" />
48              </FOOTNOTE>
49            </>
50          )}
51          {!lvl3 && lvl2 && (
52            <>
53              <CALLOUT weight="medium" {...getHighlightHTML(item, 'lvl2')} />
54              <FOOTNOTE css={footnoteStyle}>
55                <span {...getHighlightHTML(item, 'lvl0')} />
56                <FootnoteSection item={item} levelKey="lvl1" />
57              </FOOTNOTE>
58            </>
59          )}
60          {!lvl3 && !lvl2 && lvl1 && (
61            <>
62              <CALLOUT weight="medium" {...getHighlightHTML(item, 'lvl1')} />
63              <FOOTNOTE css={footnoteStyle} {...getHighlightHTML(item, 'lvl0')} />
64            </>
65          )}
66          {!lvl3 && !lvl2 && !lvl1 && lvl0 && (
67            <CALLOUT weight="medium" {...getHighlightHTML(item, 'lvl0')} />
68          )}
69          <FOOTNOTE theme="secondary" {...getContentHighlightHTML(item, true)} css={contentStyle} />
70        </div>
71        <ExternalLinkIcon />
72      </div>
73    </Command.Item>
74  );
75};
76