1import { BuildIcon } from '@expo/styleguide-icons';
2
3import type { ExpoItemType } from '../types';
4import { addHighlight } from '../utils';
5import { CommandItemBase } from './CommandItemBase';
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    <CommandItemBase value={`expo-${item.url}`} url={item.url} onSelect={onSelect}>
19      <div className="inline-flex gap-3 items-center">
20        <Icon className="text-icon-secondary" />
21        <CALLOUT
22          weight="medium"
23          dangerouslySetInnerHTML={{ __html: addHighlight(item.label, query) }}
24        />
25      </div>
26    </CommandItemBase>
27  );
28};
29