Dropdown components for use with Popover

Usage

Import

import {
  Dropdown,
  DropdownButon,
  DropdownContent,
  DropdownTitle,
} from '@passfort/castle'
content_copy
Copy

Example

<Dropdown
  render={() => (
    <>
      <DropdownTitle title="Search users" />
      <DropdownContent>
        <Input placeholder="Search" icon="search" />
      </DropdownContent>
    </>
  )}
>
  <DropdownButton label="test" />
</Dropdown>
<Dropdown
  render={() => (
    <>
      <DropdownTitle title="Search users" />
      <DropdownContent>
        <Input placeholder="Search" icon="search" />
      </DropdownContent>
    </>
  )}
>
  <DropdownButton label="test" />
</Dropdown>
content_copy
Copy
live example

Connected Dropdown

import { Connected } from '@passfort/castle'
content_copy
Copy

<Connected group="dropdown">
  <Dropdown
    render={() => (
      <>
        <DropdownTitle title="Search users" />
        <DropdownContent>
          <Input placeholder="Search" icon="search" />
        </DropdownContent>
      </>
    )}
  >
    <DropdownButton group="dropdown" label="test" />
  </Dropdown>
  <Dropdown
    render={() => (
      <>
        <DropdownTitle title="Search users" />
        <DropdownContent>
          <Input placeholder="Search" icon="search" />
        </DropdownContent>
      </>
    )}
  >
    <DropdownButton group="dropdown" label="test" />
  </Dropdown>
</Connected>
<Connected group="dropdown">
  <Dropdown
    render={() => (
      <>
        <DropdownTitle title="Search users" />
        <DropdownContent>
          <Input placeholder="Search" icon="search" />
        </DropdownContent>
      </>
    )}
  >
    <DropdownButton group="dropdown" label="test" />
  </Dropdown>
  <Dropdown
    render={() => (
      <>
        <DropdownTitle title="Search users" />
        <DropdownContent>
          <Input placeholder="Search" icon="search" />
        </DropdownContent>
      </>
    )}
  >
    <DropdownButton group="dropdown" label="test" />
  </Dropdown>
</Connected>
content_copy
Copy
live example