1import { BuildIcon } from '@expo/styleguide-icons';
2import { Command } from 'cmdk';
3
4import type { ExpoItemType } from '../types';
5import { addHighlight, openLink } from '../utils';
6import { itemStyle } from './styles';
7
8import { CALLOUT } from '~/ui/components/Text';
9
10type Props = {
11  item: ExpoItemType;
12  query: string;
13  onSelect?: () => void;
14};
15
16export const ExpoItem = ({ item, onSelect, query }: Props) => {
17  const Icon = item.Icon ?? BuildIcon;
18  return (
19    <Command.Item
20      value={`expo-${item.url}`}
21      onSelect={() => {
22        openLink(item.url);
23        onSelect && onSelect();
24      }}>
25      <div css={itemStyle}>
26        <Icon className="text-icon-secondary" />
27        <CALLOUT
28          weight="medium"
29          dangerouslySetInnerHTML={{ __html: addHighlight(item.label, query) }}
30        />
31      </div>
32    </Command.Item>
33  );
34};
35