Dropdown

import { Dropdown, IconButton } from '@i4o/catalystui'
import {
	ExitIcon,
	ExternalLinkIcon,
	FileIcon,
	GearIcon,
	HamburgerMenuIcon,
	InfoCircledIcon,
} from '@radix-ui/react-icons'
 
export default () => {
	const dropdownItems = [
		{
			label: 'New',
			icon: <FileIcon />,
			submenu: [
				{
					label: 'File',
					icon: <FileIcon />,
					onClick: () => console.log('File'),
					shortcut: 'Ctrl+N',
				},
				{
					label: 'Folder',
					icon: <FileIcon />,
					onClick: () => console.log('Folder'),
					shortcut: 'Ctrl+Shift+N',
				},
			],
			type: 'submenu',
		},
		{
			label: 'View Post',
			icon: <ExternalLinkIcon />,
			onClick: () => console.log('View Post'),
			shortcut: 'Ctrl+Shift+V',
		},
		{
			type: 'separator',
		},
		{
			label: 'Settings',
			icon: <GearIcon />,
			onClick: () => console.log('Settings'),
			shortcut: 'Ctrl+,',
		},
		{
			type: 'separator',
		},
		{
			label: 'About',
			icon: <InfoCircledIcon />,
			onClick: () => console.log('About'),
		},
		{
			label: 'Exit',
			icon: <ExitIcon />,
			onClick: () => console.log('Logout'),
			shortcut: 'Ctrl+Q',
		},
	]
 
	return (
		<Dropdown
			align='start'
			items={dropdownItems}
			trigger={<IconButton icon={<HamburgerMenuIcon />} />}
		/>
	)
}