{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "context-menu-example", "title": "Context Menu", "registryDependencies": [ "button", "context-menu", "dialog", "example" ], "files": [ { "path": "registry/base-mira/examples/context-menu-example.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n ContextMenuGroup,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n} from \"@/registry/base-mira/ui/context-menu\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction ContextMenuBasic() {\n return (\n \n \n \n Right click here\n \n \n \n Back\n Forward\n Reload\n \n \n \n \n )\n}\n\nfunction ContextMenuWithIcons() {\n return (\n \n \n \n Right click here\n \n \n \n \n \n Copy\n \n \n \n Cut\n \n \n \n Paste\n \n \n \n \n \n \n Delete\n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithShortcuts() {\n return (\n \n \n \n Right click here\n \n \n \n \n Back\n ⌘[\n \n \n Forward\n ⌘]\n \n \n Reload\n ⌘R\n \n \n \n \n \n Save\n ⌘S\n \n \n Save As...\n ⇧⌘S\n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithSubmenu() {\n return (\n \n \n \n Right click here\n \n \n \n \n Copy\n ⌘C\n \n \n Cut\n ⌘X\n \n \n \n More Tools\n \n \n Save Page...\n Create Shortcut...\n Name Window...\n \n \n \n Developer Tools\n \n \n \n Delete\n \n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithGroups() {\n return (\n \n \n \n Right click here\n \n \n \n File\n \n New File\n ⌘N\n \n \n Open File\n ⌘O\n \n \n Save\n ⌘S\n \n \n \n \n Edit\n \n Undo\n ⌘Z\n \n \n Redo\n ⇧⌘Z\n \n \n \n \n \n Cut\n ⌘X\n \n \n Copy\n ⌘C\n \n \n Paste\n ⌘V\n \n \n \n \n \n Delete\n ⌫\n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithCheckboxes() {\n return (\n \n \n \n Right click here\n \n \n \n \n Show Bookmarks Bar\n \n Show Full URLs\n \n Show Developer Tools\n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithRadio() {\n const [user, setUser] = React.useState(\"pedro\")\n const [theme, setTheme] = React.useState(\"light\")\n\n return (\n \n \n \n Right click here\n \n \n \n People\n \n \n Pedro Duarte\n \n \n Colm Tuite\n \n \n \n \n \n Theme\n \n Light\n Dark\n System\n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithDestructive() {\n return (\n \n \n \n Right click here\n \n \n \n \n \n Edit\n \n \n \n Share\n \n \n \n \n \n \n Archive\n \n \n \n Delete\n \n \n \n \n \n )\n}\n\nfunction ContextMenuWithSides() {\n return (\n \n

\n {(\n [\n \"inline-start\",\n \"left\",\n \"top\",\n \"bottom\",\n \"right\",\n \"inline-end\",\n ] as const\n ).map((side) => (\n \n \n {side.replace(\"-\", \" \")}\n \n \n \n Back\n Forward\n Reload\n \n \n \n ))}\n

\n \n )\n}\n\nfunction ContextMenuInDialog() {\n return (\n \n \n \n )\n}\n\nfunction ContextMenuWithInset() {\n const [showBookmarks, setShowBookmarks] = React.useState(true)\n const [showUrls, setShowUrls] = React.useState(false)\n const [theme, setTheme] = React.useState(\"system\")\n\n return (\n \n \n \n Right click here\n \n \n \n Actions\n \n \n Copy\n \n \n \n Cut\n \n Paste\n \n \n \n Appearance\n \n Bookmarks\n \n \n Full URLs\n \n \n \n \n Theme\n \n \n Light\n \n \n Dark\n \n \n System\n \n \n \n \n \n More Options\n \n \n Save Page...\n Create Shortcut...\n \n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], "type": "registry:example" }