Menu

'use client'

import { Button } from '@workspace/ui/components/Button'
import { Menu, MenuItem, MenuPopover, MenuTrigger } from '@workspace/ui/components/Menu'
import { MenuIcon } from 'lucide-react'

export function MenuDemo() {
    return (
        <MenuTrigger>
            <Button aria-label="Menu" size="icon" variant="outline">
                <MenuIcon />
            </Button>
            <MenuPopover>
                <Menu>
                    <MenuItem>Open</MenuItem>
                    <MenuItem>Rename</MenuItem>
                    <MenuItem>Duplicate</MenuItem>
                </Menu>
            </MenuPopover>
        </MenuTrigger>
    )
}

'use client'

import { Button } from '@workspace/ui/components/Button'
import { Menu, MenuItem, MenuPopover, MenuTrigger } from '@workspace/ui/components/Menu'
import { MenuIcon, FolderOpen, Pencil, Copy, Share2, Trash2 } from 'lucide-react'

export function MenuWithIcon() {
    return (
        <MenuTrigger>
            <Button aria-label="Menu" size="icon" variant="outline">
                <MenuIcon />
            </Button>
            <MenuPopover>
                <Menu>
                    <MenuItem>
                        <FolderOpen className="size-4" />
                        Open
                    </MenuItem>
                    <MenuItem>
                        <Pencil className="size-4" />
                        Rename
                    </MenuItem>
                    <MenuItem>
                        <Copy className="size-4" />
                        Duplicate
                    </MenuItem>
                    <MenuItem>
                        <Share2 className="size-4" />
                        Share
                    </MenuItem>
                    <MenuItem>
                        <Trash2 className="size-4" />
                        Delete
                    </MenuItem>
                </Menu>
            </MenuPopover>
        </MenuTrigger>
    )
}

import { Button } from '@workspace/ui/components/Button'
import { Menu, MenuItem, MenuPopover, MenuSubTrigger, MenuTrigger } from '@workspace/ui/components/Menu'

export function MenuWithSubmenu() {
    return (
        <MenuTrigger>
            <Button variant="outline">Actions</Button>
            <MenuPopover>
                <Menu>
                    <MenuItem>Copy</MenuItem>
                    <MenuItem>Cut</MenuItem>
                    <MenuItem>Delete</MenuItem>
                    <MenuSubTrigger>
                        <MenuItem>Share</MenuItem>
                        <MenuPopover>
                            <Menu>
                                <MenuItem>SMS</MenuItem>
                                <MenuItem>Twitter</MenuItem>
                                <MenuSubTrigger>
                                    <MenuItem>Email</MenuItem>
                                    <MenuPopover>
                                        <Menu>
                                            <MenuItem>Work</MenuItem>
                                            <MenuItem>Personal</MenuItem>
                                        </Menu>
                                    </MenuPopover>
                                </MenuSubTrigger>
                            </Menu>
                        </MenuPopover>
                    </MenuSubTrigger>
                </Menu>
            </MenuPopover>
        </MenuTrigger>
    )
}

import { Button } from '@workspace/ui/components/Button'
import { MenuTrigger, MenuItem, MenuKeyboard, MenuPopover, Menu } from '@workspace/ui/components/Menu'

export function MenuWithKeyboard() {
    return (
        <MenuTrigger>
            <Button variant="outline">Shortcuts</Button>
            <MenuPopover>
                <Menu>
                    <MenuItem>
                        New Tab <MenuKeyboard>⌘T</MenuKeyboard>
                    </MenuItem>
                    <MenuItem>
                        Close Tab <MenuKeyboard>⌘W</MenuKeyboard>
                    </MenuItem>
                </Menu>
            </MenuPopover>
        </MenuTrigger>
    )
}