1import { GithubIcon } from '@expo/styleguide-icons';
2
3import type { RNDirectoryItemType } from '../types';
4import { addHighlight } from '../utils';
5import { CommandItemBase } from './CommandItemBase';
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    <CommandItemBase
21      value={`rnd-${item.npmPkg}`}
22      url={item.githubUrl}
23      isExternalLink
24      onSelect={onSelect}>
25      <div className="inline-flex gap-3 items-center">
26        <GithubIcon className="text-icon-secondary" />
27        <div>
28          <CALLOUT
29            weight="medium"
30            dangerouslySetInnerHTML={{ __html: addHighlight(item.npmPkg, query) }}
31          />
32          <CAPTION theme="quaternary">
33            {numberFormat.format(item.github.stats.stars)} stars ·{' '}
34            {numberFormat.format(item.npm.downloads)} downloads
35          </CAPTION>
36        </div>
37        <ExternalLinkIcon />
38      </div>
39    </CommandItemBase>
40  );
41};
42