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