mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-03 01:18:38 +00:00
137b1c12b7
* feat: add phosphor icons to base ui * feat_ add phosphor to blocks * feat: add phosphor to radix blocks * feat: add phosphor to radix ui * feat: add phosphor to radix example * feat: add missing phosphor icons * fix: rename broken icons * chore: format files * fix: add missing phosphor icons * chore: build registry --------- Co-authored-by: shadcn <m@shadcn.com>
20 lines
38 KiB
JSON
20 lines
38 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "dropdown-menu-example",
|
|
"title": "Dropdown Menu",
|
|
"registryDependencies": [
|
|
"avatar",
|
|
"button",
|
|
"dialog",
|
|
"dropdown-menu",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-nova/examples/dropdown-menu-example.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuPortal,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n return (\n <ExampleWrapper>\n <DropdownMenuBasic />\n <DropdownMenuComplex />\n <DropdownMenuWithIcons />\n <DropdownMenuWithShortcuts />\n <DropdownMenuWithSubmenu />\n <DropdownMenuWithCheckboxes />\n <DropdownMenuWithCheckboxesIcons />\n <DropdownMenuWithRadio />\n <DropdownMenuWithRadioIcons />\n <DropdownMenuWithDestructive />\n <DropdownMenuWithAvatar />\n <DropdownMenuInDialog />\n </ExampleWrapper>\n )\n}\n\nfunction DropdownMenuBasic() {\n return (\n <Example title=\"Basic\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Open\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>My Account</DropdownMenuLabel>\n <DropdownMenuItem>Profile</DropdownMenuItem>\n <DropdownMenuItem>Billing</DropdownMenuItem>\n <DropdownMenuItem>Settings</DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>GitHub</DropdownMenuItem>\n <DropdownMenuItem>Support</DropdownMenuItem>\n <DropdownMenuItem disabled>API</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithIcons() {\n return (\n <Example title=\"With Icons\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Open\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"UserIcon\"\n tabler=\"IconUser\"\n hugeicons=\"UserIcon\"\n phosphor=\"UserIcon\"\n />\n Profile\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n />\n Billing\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"SettingsIcon\"\n tabler=\"IconSettings\"\n hugeicons=\"SettingsIcon\"\n phosphor=\"GearIcon\"\n />\n Settings\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"LogOutIcon\"\n tabler=\"IconLogout\"\n hugeicons=\"LogoutIcon\"\n phosphor=\"SignOutIcon\"\n />\n Log out\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithShortcuts() {\n return (\n <Example title=\"With Shortcuts\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Open\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>My Account</DropdownMenuLabel>\n <DropdownMenuItem>\n Profile\n <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuItem>\n Billing\n <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuItem>\n Settings\n <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuItem>\n Keyboard shortcuts\n <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n Log out\n <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithSubmenu() {\n return (\n <Example title=\"With Submenu\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Open\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuGroup>\n <DropdownMenuItem>Team</DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuItem>Email</DropdownMenuItem>\n <DropdownMenuItem>Message</DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem>More...</DropdownMenuItem>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n <DropdownMenuItem>\n New Team\n <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n const [showStatusBar, setShowStatusBar] = React.useState(true)\n const [showActivityBar, setShowActivityBar] = React.useState(false)\n const [showPanel, setShowPanel] = React.useState(false)\n\n return (\n <Example title=\"With Checkboxes\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Checkboxes\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"min-w-40\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n <DropdownMenuCheckboxItem\n checked={showStatusBar}\n onCheckedChange={setShowStatusBar}\n >\n <IconPlaceholder\n lucide=\"LayoutIcon\"\n tabler=\"IconLayout\"\n hugeicons=\"LayoutIcon\"\n phosphor=\"LayoutIcon\"\n />\n Status Bar\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={showActivityBar}\n onCheckedChange={setShowActivityBar}\n disabled\n >\n <IconPlaceholder\n lucide=\"ActivityIcon\"\n tabler=\"IconActivity\"\n hugeicons=\"ActivityIcon\"\n phosphor=\"ActivityIcon\"\n />\n Activity Bar\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={showPanel}\n onCheckedChange={setShowPanel}\n >\n <IconPlaceholder\n lucide=\"PanelLeftIcon\"\n tabler=\"IconLayoutSidebar\"\n hugeicons=\"LayoutLeftIcon\"\n phosphor=\"SidebarIcon\"\n />\n Panel\n </DropdownMenuCheckboxItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithRadio() {\n const [position, setPosition] = React.useState(\"bottom\")\n\n return (\n <Example title=\"With Radio Group\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Radio Group\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n <DropdownMenuRadioGroup\n value={position}\n onValueChange={setPosition}\n >\n <DropdownMenuRadioItem value=\"top\">\n <IconPlaceholder\n lucide=\"ArrowUpIcon\"\n tabler=\"IconArrowUp\"\n hugeicons=\"ArrowUp01Icon\"\n phosphor=\"ArrowUpIcon\"\n />\n Top\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"bottom\">\n <IconPlaceholder\n lucide=\"ArrowDownIcon\"\n tabler=\"IconArrowDown\"\n hugeicons=\"ArrowDown01Icon\"\n phosphor=\"ArrowDownIcon\"\n />\n Bottom\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"right\" disabled>\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"ArrowRightIcon\"\n />\n Right\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n const [notifications, setNotifications] = React.useState({\n email: true,\n sms: false,\n push: true,\n })\n\n return (\n <Example title=\"Checkboxes with Icons\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Notifications\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"min-w-56\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n <DropdownMenuCheckboxItem\n checked={notifications.email}\n onCheckedChange={(checked) =>\n setNotifications({ ...notifications, email: checked === true })\n }\n >\n <IconPlaceholder\n lucide=\"MailIcon\"\n tabler=\"IconMail\"\n hugeicons=\"MailIcon\"\n phosphor=\"EnvelopeIcon\"\n />\n Email notifications\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={notifications.sms}\n onCheckedChange={(checked) =>\n setNotifications({ ...notifications, sms: checked === true })\n }\n >\n <IconPlaceholder\n lucide=\"MessageSquareIcon\"\n tabler=\"IconMessage\"\n hugeicons=\"MessageIcon\"\n phosphor=\"ChatCircleIcon\"\n />\n SMS notifications\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={notifications.push}\n onCheckedChange={(checked) =>\n setNotifications({ ...notifications, push: checked === true })\n }\n >\n <IconPlaceholder\n lucide=\"BellIcon\"\n tabler=\"IconBell\"\n hugeicons=\"NotificationIcon\"\n phosphor=\"BellIcon\"\n />\n Push notifications\n </DropdownMenuCheckboxItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n return (\n <Example title=\"Radio with Icons\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Payment Method\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"min-w-56\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n <DropdownMenuRadioGroup\n value={paymentMethod}\n onValueChange={setPaymentMethod}\n >\n <DropdownMenuRadioItem value=\"card\">\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n />\n Credit Card\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"paypal\">\n <IconPlaceholder\n lucide=\"WalletIcon\"\n tabler=\"IconWallet\"\n hugeicons=\"WalletIcon\"\n phosphor=\"WalletIcon\"\n />\n PayPal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"bank\">\n <IconPlaceholder\n lucide=\"Building2Icon\"\n tabler=\"IconBuildingBank\"\n hugeicons=\"BankIcon\"\n phosphor=\"BankIcon\"\n />\n Bank Transfer\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithDestructive() {\n return (\n <Example title=\"With Destructive Items\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Actions\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"PencilIcon\"\n tabler=\"IconPencil\"\n hugeicons=\"EditIcon\"\n phosphor=\"PencilIcon\"\n />\n Edit\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ShareIcon\"\n tabler=\"IconShare\"\n hugeicons=\"ShareIcon\"\n phosphor=\"ShareIcon\"\n />\n Share\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ArchiveIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n />\n Archive\n </DropdownMenuItem>\n <DropdownMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"TrashIcon\"\n tabler=\"IconTrash\"\n hugeicons=\"DeleteIcon\"\n phosphor=\"TrashIcon\"\n />\n Delete\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n\nfunction DropdownMenuWithAvatar() {\n const menuContent = (\n <>\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"BadgeCheckIcon\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadgeIcon\"\n phosphor=\"CheckCircleIcon\"\n />\n Account\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n />\n Billing\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"BellIcon\"\n tabler=\"IconBell\"\n hugeicons=\"NotificationIcon\"\n phosphor=\"BellIcon\"\n />\n Notifications\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"LogOutIcon\"\n tabler=\"IconLogout\"\n hugeicons=\"LogoutIcon\"\n phosphor=\"SignOutIcon\"\n />\n Sign Out\n </DropdownMenuItem>\n </>\n )\n\n return (\n <Example title=\"With Avatar\">\n <div className=\"flex items-center justify-between gap-4\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button\n variant=\"outline\"\n className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n />\n }\n >\n <Avatar>\n <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n </Avatar>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-semibold\">shadcn</span>\n <span className=\"text-muted-foreground truncate text-xs\">\n shadcn@example.com\n </span>\n </div>\n <IconPlaceholder\n lucide=\"ChevronsUpDownIcon\"\n tabler=\"IconSelector\"\n hugeicons=\"UnfoldMoreIcon\"\n phosphor=\"CaretUpDownIcon\"\n className=\"text-muted-foreground ml-auto\"\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n {menuContent}\n </DropdownMenuContent>\n </DropdownMenu>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n }\n >\n <Avatar>\n <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n <AvatarFallback>LR</AvatarFallback>\n </Avatar>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" side=\"top\">\n {menuContent}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n </Example>\n )\n}\n\nfunction DropdownMenuInDialog() {\n return (\n <Example title=\"In Dialog\">\n <Dialog>\n <DialogTrigger render={<Button variant=\"outline\" />}>\n Open Dialog\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Dropdown Menu Example</DialogTitle>\n <DialogDescription>\n Click the button below to see the dropdown menu.\n </DialogDescription>\n </DialogHeader>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Open Menu\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CopyIcon\"\n tabler=\"IconCopy\"\n hugeicons=\"CopyIcon\"\n phosphor=\"CopyIcon\"\n />\n Copy\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ScissorsIcon\"\n tabler=\"IconCut\"\n hugeicons=\"ScissorIcon\"\n phosphor=\"ScissorsIcon\"\n />\n Cut\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ClipboardPasteIcon\"\n tabler=\"IconClipboard\"\n hugeicons=\"ClipboardIcon\"\n phosphor=\"ClipboardIcon\"\n />\n Paste\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuItem>Save Page...</DropdownMenuItem>\n <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n <DropdownMenuItem>Name Window...</DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n <DropdownMenuSeparator />\n <DropdownMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"TrashIcon\"\n tabler=\"IconTrash\"\n hugeicons=\"DeleteIcon\"\n phosphor=\"TrashIcon\"\n />\n Delete\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </DialogContent>\n </Dialog>\n </Example>\n )\n}\n\nfunction DropdownMenuComplex() {\n const [notifications, setNotifications] = React.useState({\n email: true,\n sms: false,\n push: true,\n })\n const [theme, setTheme] = React.useState(\"light\")\n\n return (\n <Example title=\"Complex\">\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" className=\"w-fit\" />}\n >\n Complex Menu\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>File</DropdownMenuLabel>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FileIcon\"\n tabler=\"IconFile\"\n hugeicons=\"FileIcon\"\n phosphor=\"FileIcon\"\n />\n New File\n <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FolderIcon\"\n tabler=\"IconFolder\"\n hugeicons=\"FolderIcon\"\n phosphor=\"FolderIcon\"\n />\n New Folder\n <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <IconPlaceholder\n lucide=\"FolderOpenIcon\"\n tabler=\"IconFolderOpen\"\n hugeicons=\"FolderOpenIcon\"\n phosphor=\"FolderOpenIcon\"\n />\n Open Recent\n </DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FileCodeIcon\"\n tabler=\"IconFileCode\"\n hugeicons=\"CodeIcon\"\n phosphor=\"CodeIcon\"\n />\n Project Alpha\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FileCodeIcon\"\n tabler=\"IconFileCode\"\n hugeicons=\"CodeIcon\"\n phosphor=\"CodeIcon\"\n />\n Project Beta\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <IconPlaceholder\n lucide=\"MoreHorizontalIcon\"\n tabler=\"IconDots\"\n hugeicons=\"MoreHorizontalCircle01Icon\"\n phosphor=\"DotsThreeOutlineIcon\"\n />\n More Projects\n </DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FileCodeIcon\"\n tabler=\"IconFileCode\"\n hugeicons=\"CodeIcon\"\n phosphor=\"FileCodeIcon\"\n />\n Project Gamma\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FileCodeIcon\"\n tabler=\"IconFileCode\"\n hugeicons=\"CodeIcon\"\n phosphor=\"FileCodeIcon\"\n />\n Project Delta\n </DropdownMenuItem>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FolderSearchIcon\"\n tabler=\"IconFolderSearch\"\n hugeicons=\"SearchIcon\"\n phosphor=\"MagnifyingGlassIcon\"\n />\n Browse...\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"SaveIcon\"\n tabler=\"IconDeviceFloppy\"\n hugeicons=\"FloppyDiskIcon\"\n phosphor=\"FloppyDiskIcon\"\n />\n Save\n <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"DownloadIcon\"\n tabler=\"IconDownload\"\n hugeicons=\"DownloadIcon\"\n phosphor=\"DownloadIcon\"\n />\n Export\n <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuLabel>View</DropdownMenuLabel>\n <DropdownMenuCheckboxItem\n checked={notifications.email}\n onCheckedChange={(checked) =>\n setNotifications({ ...notifications, email: checked === true })\n }\n >\n <IconPlaceholder\n lucide=\"EyeIcon\"\n tabler=\"IconEye\"\n hugeicons=\"EyeIcon\"\n phosphor=\"EyeIcon\"\n />\n Show Sidebar\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={notifications.sms}\n onCheckedChange={(checked) =>\n setNotifications({ ...notifications, sms: checked === true })\n }\n >\n <IconPlaceholder\n lucide=\"LayoutIcon\"\n tabler=\"IconLayout\"\n hugeicons=\"LayoutIcon\"\n phosphor=\"LayoutIcon\"\n />\n Show Status Bar\n </DropdownMenuCheckboxItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <IconPlaceholder\n lucide=\"PaletteIcon\"\n tabler=\"IconPalette\"\n hugeicons=\"PaintBoardIcon\"\n phosphor=\"PaletteIcon\"\n />\n Theme\n </DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n <DropdownMenuRadioGroup\n value={theme}\n onValueChange={setTheme}\n >\n <DropdownMenuRadioItem value=\"light\">\n <IconPlaceholder\n lucide=\"SunIcon\"\n tabler=\"IconSun\"\n hugeicons=\"SunIcon\"\n phosphor=\"SunIcon\"\n />\n Light\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"dark\">\n <IconPlaceholder\n lucide=\"MoonIcon\"\n tabler=\"IconMoon\"\n hugeicons=\"MoonIcon\"\n phosphor=\"MoonIcon\"\n />\n Dark\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"system\">\n <IconPlaceholder\n lucide=\"MonitorIcon\"\n tabler=\"IconDeviceDesktop\"\n hugeicons=\"ComputerIcon\"\n phosphor=\"MonitorIcon\"\n />\n System\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuGroup>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuLabel>Account</DropdownMenuLabel>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"UserIcon\"\n tabler=\"IconUser\"\n hugeicons=\"UserIcon\"\n phosphor=\"UserIcon\"\n />\n Profile\n <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n />\n Billing\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <IconPlaceholder\n lucide=\"SettingsIcon\"\n tabler=\"IconSettings\"\n hugeicons=\"SettingsIcon\"\n phosphor=\"GearIcon\"\n />\n Settings\n </DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"KeyboardIcon\"\n tabler=\"IconKeyboard\"\n hugeicons=\"KeyboardIcon\"\n phosphor=\"KeyboardIcon\"\n />\n Keyboard Shortcuts\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"LanguagesIcon\"\n tabler=\"IconLanguage\"\n hugeicons=\"LanguageCircleIcon\"\n phosphor=\"TranslateIcon\"\n />\n Language\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <IconPlaceholder\n lucide=\"BellIcon\"\n tabler=\"IconBell\"\n hugeicons=\"NotificationIcon\"\n phosphor=\"BellIcon\"\n />\n Notifications\n </DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuGroup>\n <DropdownMenuLabel>\n Notification Types\n </DropdownMenuLabel>\n <DropdownMenuCheckboxItem\n checked={notifications.push}\n onCheckedChange={(checked) =>\n setNotifications({\n ...notifications,\n push: checked === true,\n })\n }\n >\n <IconPlaceholder\n lucide=\"BellIcon\"\n tabler=\"IconBell\"\n hugeicons=\"NotificationIcon\"\n phosphor=\"BellIcon\"\n />\n Push Notifications\n </DropdownMenuCheckboxItem>\n <DropdownMenuCheckboxItem\n checked={notifications.email}\n onCheckedChange={(checked) =>\n setNotifications({\n ...notifications,\n email: checked === true,\n })\n }\n >\n <IconPlaceholder\n lucide=\"MailIcon\"\n tabler=\"IconMail\"\n hugeicons=\"MailIcon\"\n phosphor=\"EnvelopeIcon\"\n />\n Email Notifications\n </DropdownMenuCheckboxItem>\n </DropdownMenuGroup>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ShieldIcon\"\n tabler=\"IconShield\"\n hugeicons=\"ShieldIcon\"\n phosphor=\"ShieldIcon\"\n />\n Privacy & Security\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"HelpCircleIcon\"\n tabler=\"IconHelpCircle\"\n hugeicons=\"HelpCircleIcon\"\n phosphor=\"QuestionIcon\"\n />\n Help & Support\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FileTextIcon\"\n tabler=\"IconFileText\"\n hugeicons=\"File01Icon\"\n phosphor=\"FileTextIcon\"\n />\n Documentation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"LogOutIcon\"\n tabler=\"IconLogout\"\n hugeicons=\"LogoutIcon\"\n phosphor=\"SignOutIcon\"\n />\n Sign Out\n <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |