SearchDirectory() — ui Function Reference

Architecture documentation for the SearchDirectory() function in search-directory.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ SearchDirectory() — ui Function Reference

Dependency Diagram

graph TD
  81a13e24_67ef_2515_15ef_fbef5b7f6a8f["SearchDirectory()"]
  f34c1490_de6c_039c_8593_c5f7699bd714["search-directory.tsx"]
  81a13e24_67ef_2515_15ef_fbef5b7f6a8f -->|defined in| f34c1490_de6c_039c_8593_c5f7699bd714
  style 81a13e24_67ef_2515_15ef_fbef5b7f6a8f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/search-directory.tsx lines 13–55

export const SearchDirectory = () => {
  const { query, registries, setQuery } = useSearchRegistry()

  const onQueryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    setQuery(value)
  }

  return (
    <Field>
      <InputGroup>
        <InputGroupAddon>
          <Search />
        </InputGroupAddon>
        <InputGroupInput
          placeholder="Search"
          value={query}
          onChange={onQueryChange}
        />
        <InputGroupAddon align="inline-end">
          <span className="text-muted-foreground tabular-nums sm:text-xs">
            {registries.length}{" "}
            {registries.length === 1 ? "registry" : "registries"}
          </span>
        </InputGroupAddon>
        <InputGroupAddon
          align="inline-end"
          data-disabled={!query.length}
          className="data-[disabled=true]:hidden"
        >
          <InputGroupButton
            aria-label="Clear"
            title="Clear"
            size="icon-xs"
            onClick={() => setQuery(null)}
          >
            <X />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </Field>
  )
}