Как создать поиск в ui/shadcn?

В будущем вы можете включить некоторый код; таким образом сложно обнаружить проблему.

У меня не было проблем с реализацией этого, поскольку CommandSearch.tsx выглядел следующим образом:

interface ICommandProps {
  commands: { value: string; label: string }[];
}

export default function CommandSearch({ commands }: ICommandProps) {
  const [open, setOpen] = React.useState(false);
  const [inputValue, setInputValue] = React.useState("");

  const handleValueChange = (value: string) => {
    setInputValue(value);
    setOpen(!!value);
  };

  const filteredCommands = Array.isArray(commands)
    ? commands.filter((command) =>
        command.label.toLowerCase().includes(inputValue.toLowerCase())
      )
    : [];
  console.info("filteredCommands", filteredCommands);
  return (
    <Command className = "rounded-lg border shadow-md">
      <CommandInput
        placeholder = "Type a command or search..."
        onValueChange = {handleValueChange}
      />
      {
        <CommandList>
          {open &&
            filteredCommands.length > 0 &&
            filteredCommands.map((command) => (
              <CommandItem key = {command.value} value = {command.value}>
                {command.label}
              </CommandItem>
            ))}
        </CommandList>
      }
    </Command>
  );
}
}

И следующая страница выглядит так:

export default function Page() {
  const commands = [
    { value: "calendar", label: "Calendar" },
    { value: "search-emoji", label: "Search Emoji" },
    { value: "calculator", label: "Calculator" },
  ];

  return <CommandSearch commands = {commands} />;
}