import { Dropdown, DropdownTrigger, DropdownContent, DropdownGroup, DropdownItem, DropdownSeparator, DropdownLabel, DropdownShorcut, DropdownSub, DropdownSubTrigger, DropdownSubContent, DropdownPortal } from "@openlite/ui";
 
function App() {
  return (
     <Dropdown className="w-96" >
      <div className='flex justify-center'>
        <DropdownTrigger asChild>
          <Button>Open</Button>
        </DropdownTrigger>
      </div>
      <DropdownContent>
        <DropdownLabel>My Account</DropdownLabel>
        <DropdownSeparator />
        <DropdownGroup>
          <DropdownItem>
            <span>Profile</span>
            <DropdownShorcut>⇧⌘P</DropdownShorcut>
          </DropdownItem>
          <DropdownItem>
            <span>Billing</span>
            <DropdownShorcut>⌘B</DropdownShorcut>
          </DropdownItem>
          <DropdownItem>
            <span>Settings</span>
            <DropdownShorcut>⌘S</DropdownShorcut>
          </DropdownItem>
          <DropdownItem>
            <span>Keyboard shortcuts</span>
            <DropdownShorcut>⌘K</DropdownShorcut>
          </DropdownItem>
        </DropdownGroup>
        <DropdownSeparator />
        <DropdownGroup>
          <DropdownItem>
            <span>Team</span>
          </DropdownItem>
          <DropdownSub>
            <DropdownSubTrigger>
              <span>Invite users</span>
            </DropdownSubTrigger>
            <DropdownPortal>
              <DropdownSubContent>
                <DropdownItem>
                  <span>Email</span>
                </DropdownItem>
                <DropdownItem>
                  <span>Message</span>
                </DropdownItem>
                <DropdownSeparator />
                <DropdownItem>
                  <span>More...</span>
                </DropdownItem>
              </DropdownSubContent>
            </DropdownPortal>
          </DropdownSub>
          <DropdownItem>
            <span>New Team</span>
            <DropdownShorcut>⌘+T</DropdownShorcut>
          </DropdownItem>
        </DropdownGroup>
        <DropdownSeparator />
        <DropdownItem>
          <span>GitHub</span>
        </DropdownItem>
        <DropdownItem>
          <span>Support</span>
        </DropdownItem>
        <DropdownItem disabled>
          <span>API</span>
        </DropdownItem>
        <DropdownSeparator />
        <DropdownItem>
          <span>Log out</span>
          <DropdownShorcut>⇧⌘Q</DropdownShorcut>
        </DropdownItem>
      </DropdownContent>
    </Dropdown>
  )
}