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

Dropdown Button Group

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

<ButtonGroup>
  <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>
</ButtonGroup>;
<ButtonGroup>
  <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>
</ButtonGroup>;
content_copy
Copy
live example