Function createOutputForMatch

app/components/SearchPalette.tsx:415–451

(
  stringValue: string,
  isHighlighted: boolean,
  textSize: "text-xs" | "text-sm" | "text-base" | "text-lg" = "text-base",
  matches?: Array<Match>,
  maxLength: number = 68
)

}

function createOutputForMatch(
  stringValue: string,
  isHighlighted: boolean,
  textSize: "text-xs" | "text-sm" | "text-base" | "text-lg" = "text-base",
  matches?: Array<Match>,
  maxLength: number = 68
): JSX.Element {
  if (!matches || matches.length === 0) {
    return <>{truncate(stringValue, { length: maxLength })}</>;
  }

  const stringSlices = getStringSlices(stringValue, matches, maxLength);

  return (
    <>
      {stringSlices.map((s, index) => {
        return (
          <span
            key={index}
            className={
              s.isMatch
                ? classnames(
                    textSize,
                    isHighlighted
                      ? "text-white underline underline-offset-1"
                      : "text-indigo-600 dark:text-indigo-400"
                  )
                : ""
            }
          >
            {s.slice}
          </span>
        );
      })}
    </>
  );
}