ResultsList() — supabase Function Reference

Source Code

apps/studio/components/interfaces/App/CommandMenu/ContextSearchResults.shared.tsx lines 58–111

export function ResultsList({
  results,
  icon: Icon,
  getIcon,
  onResultClick,
  getRoute,
  className,
}: ResultsListProps) {
  const commands = results.map((result): IRouteCommand | IActionCommand => {
    const ResultIcon = getIcon ? getIcon(result) : Icon
    const baseCommand = {
      id: result.id,
      name: result.name,
      value: result.description ? `${result.name} ${result.description}` : result.name,
      icon: () => <ResultIcon className="h-4 w-4" strokeWidth={1.5} />,
    }

    if (getRoute) {
      return {
        ...baseCommand,
        route: getRoute(result),
      } as IRouteCommand
    }

    return {
      ...baseCommand,
      action: () => onResultClick?.(result),
    } as IActionCommand
  })

  return (
    <CommandList_Shadcn_
      className={cn(
        '!max-h-full flex-1 min-h-0 overflow-y-auto overflow-x-hidden bg-transparent',
        className
      )}
    >
      <CommandGroup>
        {commands.map((command) => (
          <CommandItem key={command.id} command={command}>
            <div className="flex flex-col min-w-0 text-foreground-light">
              <TextHighlighter>{command.name}</TextHighlighter>
              {command.value && command.value !== command.name && (
                <p className="text-xs text-foreground-lighter/70 truncate mt-0.5">
                  {command.value.replace(command.name, '').trim()}
                </p>
              )}
            </div>
          </CommandItem>
        ))}
      </CommandGroup>
    </CommandList_Shadcn_>
  )
}