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