Function SearchItem

app/components/SearchPalette.tsx:218–279

({
  itemProps,
  result,
  isHighlighted,
}: SearchItemProps)

};

export function SearchItem({
  itemProps,
  result,
  isHighlighted,
}: SearchItemProps) {
  const heroPath = new JSONHeroPath(result.item);
  const [json] = useJson();

  const itemValue = heroPath.first(json);
  const ItemIcon = iconForValue(itemValue);

  return (
    <li
      {...itemProps}
      className={classnames("flex w-full hover:cursor-pointer")}
    >
      <div
        className={classnames(
          "w-full h-[calc(100%-4px)] mb-2 rounded-sm group",
          isHighlighted ? "bg-indigo-700" : "bg-slate-100 dark:bg-slate-900"
        )}
      >
        <div className="flex items-center w-full py-2 pl-4 pr-3">
          <ItemIcon
            className={classnames(
              "h-6 w-6",
              isHighlighted
                ? "text-white"
                : "text-slate-500 dark:text-slate-400"
            )}
          ></ItemIcon>
          <div className="flex flex-col ml-3">
            <div className="flex w-full items-baseline">
              <SearchPathResult
                path={heroPath}
                searchResult={result}
                isHighlighted={isHighlighted}
              />
            </div>
            <div className="key-value flex justify-between">
              {result.score.rawValue && (
                <SearchResultValue
                  isHighlighted={isHighlighted}
                  stringValue={result.score.rawValue}
                  matches={result.score.rawValueMatch}
                />
              )}
              {result.score.formattedValue &&
                result.score.formattedValue !== result.score.rawValue && (
                  <SearchResultValue
                    isHighlighted={isHighlighted}
                    stringValue={result.score.formattedValue}
                    matches={result.score.formattedValueMatch}
                  />
                )}
            </div>
          </div>
        </div>