Dropdown

  import React from 'react';
  import * as Dropdown from "~/ui/components/Dropdown";

  export default function App() {
    return (
      <div style={styles.container}>
        <p>Dropdown Example</p>
        <div className="flex">
        <Dropdown.Dropdown
          trigger={
            <div className="relative">
              <Button
                size="xs"
                theme="secondary"
                leftSlot={<SettingsIcon className="icon-sm text-icon-secondary pointer-events-none" />}
                rightSlot={<ChevronDownIcon className="icon-xs text-icon-secondary pointer-events-none" />}
              >
                <FOOTNOTE>
                  Settings 
                </FOOTNOTE>
              </Button>
            </div>
          }
        >
          <Dropdown.Item
            preventAutoClose
            label="Use dark theme"
            onSelect={() => alert('selected dark theme')}
          />
          <Dropdown.Item
            preventAutoClose
            label="Wrap long lines"
            onSelect={() => alert('selected line wrap')}
          />
        </Dropdown.Dropdown>
      </div>
    );
  }