mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-02-09 02:49:29 +08:00
18 lines
22 KiB
JSON
18 lines
22 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "command-example",
|
|
"title": "Command",
|
|
"registryDependencies": [
|
|
"button",
|
|
"command",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/radix-vega/examples/command-example.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\nimport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n} from \"@/registry/radix-vega/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n return (\n <ExampleWrapper>\n <CommandInline />\n <CommandBasic />\n <CommandWithShortcuts />\n <CommandWithGroups />\n <CommandManyItems />\n </ExampleWrapper>\n )\n}\n\nfunction CommandInline() {\n return (\n <Example title=\"Inline\">\n <Card className=\"w-full p-0\">\n <CardContent className=\"p-0\">\n <Command>\n <CommandInput placeholder=\"Type a command or search...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup heading=\"Suggestions\">\n <CommandItem>\n <IconPlaceholder\n lucide=\"CalendarIcon\"\n tabler=\"IconCalendar\"\n hugeicons=\"CalendarIcon\"\n phosphor=\"CalendarBlankIcon\"\n remixicon=\"RiCalendarLine\"\n />\n <span>Calendar</span>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"SmileIcon\"\n tabler=\"IconMoodSmile\"\n hugeicons=\"SmileIcon\"\n phosphor=\"SmileyIcon\"\n remixicon=\"RiEmotionLine\"\n />\n <span>Search Emoji</span>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"CalculatorIcon\"\n tabler=\"IconCalculator\"\n hugeicons=\"CalculatorIcon\"\n phosphor=\"CalculatorIcon\"\n remixicon=\"RiCalculatorLine\"\n />\n <span>Calculator</span>\n </CommandItem>\n </CommandGroup>\n <CommandSeparator />\n <CommandGroup heading=\"Settings\">\n <CommandItem>\n <IconPlaceholder\n lucide=\"UserIcon\"\n tabler=\"IconUser\"\n hugeicons=\"UserIcon\"\n phosphor=\"UserIcon\"\n remixicon=\"RiUserLine\"\n />\n <span>Profile</span>\n <CommandShortcut>⌘P</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n remixicon=\"RiBankCardLine\"\n />\n <span>Billing</span>\n <CommandShortcut>⌘B</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"SettingsIcon\"\n tabler=\"IconSettings\"\n hugeicons=\"SettingsIcon\"\n phosphor=\"GearIcon\"\n remixicon=\"RiSettingsLine\"\n />\n <span>Settings</span>\n <CommandShortcut>⌘S</CommandShortcut>\n </CommandItem>\n </CommandGroup>\n </CommandList>\n </Command>\n </CardContent>\n </Card>\n </Example>\n )\n}\n\nfunction CommandBasic() {\n const [open, setOpen] = React.useState(false)\n\n return (\n <Example title=\"Basic\">\n <div className=\"flex flex-col gap-4\">\n <Button\n onClick={() => setOpen(true)}\n variant=\"outline\"\n className=\"w-fit\"\n >\n Open Menu\n </Button>\n <CommandDialog open={open} onOpenChange={setOpen}>\n <Command>\n <CommandInput placeholder=\"Type a command or search...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup heading=\"Suggestions\">\n <CommandItem>Calendar</CommandItem>\n <CommandItem>Search Emoji</CommandItem>\n <CommandItem>Calculator</CommandItem>\n </CommandGroup>\n </CommandList>\n </Command>\n </CommandDialog>\n </div>\n </Example>\n )\n}\n\nfunction CommandWithShortcuts() {\n const [open, setOpen] = React.useState(false)\n\n return (\n <Example title=\"With Shortcuts\">\n <div className=\"flex flex-col gap-4\">\n <Button\n onClick={() => setOpen(true)}\n variant=\"outline\"\n className=\"w-fit\"\n >\n Open Menu\n </Button>\n <CommandDialog open={open} onOpenChange={setOpen}>\n <Command>\n <CommandInput placeholder=\"Type a command or search...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup heading=\"Settings\">\n <CommandItem>\n <IconPlaceholder\n lucide=\"UserIcon\"\n tabler=\"IconUser\"\n hugeicons=\"UserIcon\"\n phosphor=\"UserIcon\"\n remixicon=\"RiUserLine\"\n />\n <span>Profile</span>\n <CommandShortcut>⌘P</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n remixicon=\"RiBankCardLine\"\n />\n <span>Billing</span>\n <CommandShortcut>⌘B</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"SettingsIcon\"\n tabler=\"IconSettings\"\n hugeicons=\"SettingsIcon\"\n phosphor=\"GearIcon\"\n remixicon=\"RiSettingsLine\"\n />\n <span>Settings</span>\n <CommandShortcut>⌘S</CommandShortcut>\n </CommandItem>\n </CommandGroup>\n </CommandList>\n </Command>\n </CommandDialog>\n </div>\n </Example>\n )\n}\n\nfunction CommandWithGroups() {\n const [open, setOpen] = React.useState(false)\n\n return (\n <Example title=\"With Groups\">\n <div className=\"flex flex-col gap-4\">\n <Button\n onClick={() => setOpen(true)}\n variant=\"outline\"\n className=\"w-fit\"\n >\n Open Menu\n </Button>\n <CommandDialog open={open} onOpenChange={setOpen}>\n <Command>\n <CommandInput placeholder=\"Type a command or search...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup heading=\"Suggestions\">\n <CommandItem>\n <IconPlaceholder\n lucide=\"CalendarIcon\"\n tabler=\"IconCalendar\"\n hugeicons=\"CalendarIcon\"\n phosphor=\"CalendarBlankIcon\"\n remixicon=\"RiCalendarLine\"\n />\n <span>Calendar</span>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"SmileIcon\"\n tabler=\"IconMoodSmile\"\n hugeicons=\"SmileIcon\"\n phosphor=\"SmileyIcon\"\n remixicon=\"RiEmotionLine\"\n />\n <span>Search Emoji</span>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"CalculatorIcon\"\n tabler=\"IconCalculator\"\n hugeicons=\"CalculatorIcon\"\n phosphor=\"CalculatorIcon\"\n remixicon=\"RiCalculatorLine\"\n />\n <span>Calculator</span>\n </CommandItem>\n </CommandGroup>\n <CommandSeparator />\n <CommandGroup heading=\"Settings\">\n <CommandItem>\n <IconPlaceholder\n lucide=\"UserIcon\"\n tabler=\"IconUser\"\n hugeicons=\"UserIcon\"\n phosphor=\"UserIcon\"\n remixicon=\"RiUserLine\"\n />\n <span>Profile</span>\n <CommandShortcut>⌘P</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n remixicon=\"RiBankCardLine\"\n />\n <span>Billing</span>\n <CommandShortcut>⌘B</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"SettingsIcon\"\n tabler=\"IconSettings\"\n hugeicons=\"SettingsIcon\"\n phosphor=\"GearIcon\"\n remixicon=\"RiSettingsLine\"\n />\n <span>Settings</span>\n <CommandShortcut>⌘S</CommandShortcut>\n </CommandItem>\n </CommandGroup>\n </CommandList>\n </Command>\n </CommandDialog>\n </div>\n </Example>\n )\n}\n\nfunction CommandManyItems() {\n const [open, setOpen] = React.useState(false)\n\n return (\n <Example title=\"Many Groups & Items\">\n <div className=\"flex flex-col gap-4\">\n <Button\n onClick={() => setOpen(true)}\n variant=\"outline\"\n className=\"w-fit\"\n >\n Open Menu\n </Button>\n <CommandDialog open={open} onOpenChange={setOpen}>\n <Command>\n <CommandInput placeholder=\"Type a command or search...\" />\n <CommandList>\n <CommandEmpty>No results found.</CommandEmpty>\n <CommandGroup heading=\"Navigation\">\n <CommandItem>\n <IconPlaceholder\n lucide=\"HomeIcon\"\n tabler=\"IconHome\"\n hugeicons=\"HomeIcon\"\n phosphor=\"HouseIcon\"\n remixicon=\"RiHomeLine\"\n />\n <span>Home</span>\n <CommandShortcut>⌘H</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconInbox\"\n hugeicons=\"InboxIcon\"\n phosphor=\"TrayIcon\"\n remixicon=\"RiInboxLine\"\n />\n <span>Inbox</span>\n <CommandShortcut>⌘I</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"FileTextIcon\"\n tabler=\"IconFileText\"\n hugeicons=\"File02Icon\"\n phosphor=\"FileTextIcon\"\n remixicon=\"RiFileTextLine\"\n />\n <span>Documents</span>\n <CommandShortcut>⌘D</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"FolderIcon\"\n tabler=\"IconFolder\"\n hugeicons=\"FolderIcon\"\n phosphor=\"FolderIcon\"\n remixicon=\"RiFolderLine\"\n />\n <span>Folders</span>\n <CommandShortcut>⌘F</CommandShortcut>\n </CommandItem>\n </CommandGroup>\n <CommandSeparator />\n <CommandGroup heading=\"Actions\">\n <CommandItem>\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n remixicon=\"RiAddLine\"\n />\n <span>New File</span>\n <CommandShortcut>⌘N</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"FolderPlusIcon\"\n tabler=\"IconFolderPlus\"\n hugeicons=\"FolderAddIcon\"\n phosphor=\"FolderPlusIcon\"\n remixicon=\"RiFolderAddLine\"\n />\n <span>New Folder</span>\n <CommandShortcut>⇧⌘N</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"CopyIcon\"\n tabler=\"IconCopy\"\n hugeicons=\"CopyIcon\"\n phosphor=\"CopyIcon\"\n remixicon=\"RiFileCopyLine\"\n />\n <span>Copy</span>\n <CommandShortcut>⌘C</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"ScissorsIcon\"\n tabler=\"IconCut\"\n hugeicons=\"ScissorIcon\"\n phosphor=\"ScissorsIcon\"\n remixicon=\"RiScissorsLine\"\n />\n <span>Cut</span>\n <CommandShortcut>⌘X</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"ClipboardPasteIcon\"\n tabler=\"IconClipboard\"\n hugeicons=\"ClipboardIcon\"\n phosphor=\"ClipboardIcon\"\n remixicon=\"RiClipboardLine\"\n />\n <span>Paste</span>\n <CommandShortcut>⌘V</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"TrashIcon\"\n tabler=\"IconTrash\"\n hugeicons=\"DeleteIcon\"\n phosphor=\"TrashIcon\"\n remixicon=\"RiDeleteBinLine\"\n />\n <span>Delete</span>\n <CommandShortcut>⌫</CommandShortcut>\n </CommandItem>\n </CommandGroup>\n <CommandSeparator />\n <CommandGroup heading=\"View\">\n <CommandItem>\n <IconPlaceholder\n lucide=\"LayoutGridIcon\"\n tabler=\"IconLayoutGrid\"\n hugeicons=\"GridIcon\"\n phosphor=\"GridFourIcon\"\n remixicon=\"RiGridLine\"\n />\n <span>Grid View</span>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"ListIcon\"\n tabler=\"IconList\"\n hugeicons=\"Menu05Icon\"\n phosphor=\"ListIcon\"\n remixicon=\"RiListUnordered\"\n />\n <span>List View</span>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"ZoomInIcon\"\n tabler=\"IconZoomIn\"\n hugeicons=\"ZoomInAreaIcon\"\n phosphor=\"MagnifyingGlassMinusIcon\"\n remixicon=\"RiSearchEyeLine\"\n />\n <span>Zoom In</span>\n <CommandShortcut>⌘+</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"ZoomOutIcon\"\n tabler=\"IconZoomOut\"\n hugeicons=\"ZoomOutAreaIcon\"\n phosphor=\"MagnifyingGlassPlusIcon\"\n remixicon=\"RiZoomInLine\"\n />\n <span>Zoom Out</span>\n <CommandShortcut>⌘-</CommandShortcut>\n </CommandItem>\n </CommandGroup>\n <CommandSeparator />\n <CommandGroup heading=\"Account\">\n <CommandItem>\n <IconPlaceholder\n lucide=\"UserIcon\"\n tabler=\"IconUser\"\n hugeicons=\"UserIcon\"\n phosphor=\"UserIcon\"\n remixicon=\"RiUserLine\"\n />\n <span>Profile</span>\n <CommandShortcut>⌘P</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"CreditCardIcon\"\n tabler=\"IconCreditCard\"\n hugeicons=\"CreditCardIcon\"\n phosphor=\"CreditCardIcon\"\n remixicon=\"RiBankCardLine\"\n />\n <span>Billing</span>\n <CommandShortcut>⌘B</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"SettingsIcon\"\n tabler=\"IconSettings\"\n hugeicons=\"SettingsIcon\"\n phosphor=\"GearIcon\"\n remixicon=\"RiSettingsLine\"\n />\n <span>Settings</span>\n <CommandShortcut>⌘S</CommandShortcut>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"BellIcon\"\n tabler=\"IconBell\"\n hugeicons=\"NotificationIcon\"\n phosphor=\"BellIcon\"\n remixicon=\"RiNotificationLine\"\n />\n <span>Notifications</span>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"HelpCircleIcon\"\n tabler=\"IconHelpCircle\"\n hugeicons=\"HelpCircleIcon\"\n phosphor=\"QuestionIcon\"\n remixicon=\"RiQuestionLine\"\n />\n <span>Help & Support</span>\n </CommandItem>\n </CommandGroup>\n <CommandSeparator />\n <CommandGroup heading=\"Tools\">\n <CommandItem>\n <IconPlaceholder\n lucide=\"CalculatorIcon\"\n tabler=\"IconCalculator\"\n hugeicons=\"CalculatorIcon\"\n phosphor=\"CalculatorIcon\"\n remixicon=\"RiCalculatorLine\"\n />\n <span>Calculator</span>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"CalendarIcon\"\n tabler=\"IconCalendar\"\n hugeicons=\"CalendarIcon\"\n phosphor=\"CalendarBlankIcon\"\n remixicon=\"RiCalendarLine\"\n />\n <span>Calendar</span>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"ImageIcon\"\n tabler=\"IconPhoto\"\n hugeicons=\"ImageIcon\"\n phosphor=\"ImageIcon\"\n remixicon=\"RiImageLine\"\n />\n <span>Image Editor</span>\n </CommandItem>\n <CommandItem>\n <IconPlaceholder\n lucide=\"CodeIcon\"\n tabler=\"IconCode\"\n hugeicons=\"CodeIcon\"\n phosphor=\"CodeIcon\"\n remixicon=\"RiCodeLine\"\n />\n <span>Code Editor</span>\n </CommandItem>\n </CommandGroup>\n </CommandList>\n </Command>\n </CommandDialog>\n </div>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |