Function SearchPathResult

app/components/SearchPalette.tsx:289–378

({
  path,
  searchResult,
  isHighlighted,
  maxWeight = 90,
}: {
  path: JSONHeroPath;
  isHighlighted: boolean;
  searchResult: SearchResult<string>;
  maxWeight?: number;
})

//
// If combined component strings are too long, then we need to choose some components to hide behind an ellipsis, making sure we don't hide matches
function SearchPathResult({
  path,
  searchResult,
  isHighlighted,
  maxWeight = 90,
}: {
  path: JSONHeroPath;
  isHighlighted: boolean;
  searchResult: SearchResult<string>;
  maxWeight?: number;
}) {
  const description = searchResult.score.description;
  const label = searchResult.score.label;

  const labelMatches = searchResult.score.labelMatch;
  const descriptionMatches = searchResult.score.descriptionMatch;

  const descriptionSlices = getComponentSlices(
    description ?? "",
    (descriptionMatches ?? []).map(({ start, end }) => ({
      start,
      end: end - 1,
    })),
    maxWeight
  );

  return (
    <>
      {label && (
        <SearchResultValue
          isHighlighted={isHighlighted}
          stringValue={label}
          matches={labelMatches}
          textSize="text-lg"
          className={classnames(
            "mr-3 text-lg",
            isHighlighted ? `text-white` : "text-slate-900 dark:text-white"
          )}
          key="label"
        />
      )}
      {descriptionSlices.map((slice, i) =>
        slice.type === "component" ? (
          <span
            key={i}
            className={
              slice.slice.isMatch
                ? classnames(
                    "text-base",
                    isHighlighted
                      ? "text-white underline underline-offset-1"
                      : "text-indigo-600 dark:text-indigo-400"
                  )
                : classnames(
                    "text-base",
                    isHighlighted
                      ? "text-white"
                      : "text-slate-800 dark:text-slate-400"