1import { GithubIcon, theme } from '@expo/styleguide';
2import { Command } from 'cmdk';
3
4import type { RNDirectoryItemType } from '../types';
5import { addHighlight, openLink } from '../utils';
6import { ExternalLinkIcon } from './icons';
7import { footnoteStyle, itemStyle } from './styles';
8
9import { CALLOUT, FOOTNOTE } from '~/ui/components/Text';
10
11type Props = {
12  item: RNDirectoryItemType;
13  query: string;
14  onSelect?: () => void;
15};
16
17const numberFormat = new Intl.NumberFormat();
18
19export const RNDirectoryItem = ({ item, onSelect, query }: Props) => {
20  return (
21    <Command.Item
22      value={`rnd-${item.npmPkg}`}
23      onSelect={() => {
24        openLink(item.githubUrl, true);
25        onSelect && onSelect();
26      }}>
27      <div css={itemStyle}>
28        <GithubIcon color={theme.icon.secondary} />
29        <div>
30          <CALLOUT
31            weight="medium"
32            dangerouslySetInnerHTML={{ __html: addHighlight(item.npmPkg, query) }}
33          />
34          <FOOTNOTE css={footnoteStyle}>
35            {numberFormat.format(item.github.stats.stars)} stars ·{' '}
36            {numberFormat.format(item.npm.downloads)} downloads
37          </FOOTNOTE>
38        </div>
39        <ExternalLinkIcon />
40      </div>
41    </Command.Item>
42  );
43};
44