{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-item-7","type":"registry:block","title":"Items with keyboard shortcuts","description":"Items with keyboard shortcuts","dependencies":[],"registryDependencies":["item","kbd"],"files":[{"path":"c-item-7.tsx","type":"registry:block","content":"import {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst commands = [\n  {\n    icon: (\n      <IconPlaceholder\n        lucide=\"SearchIcon\"\n        tabler=\"IconSearch\"\n        hugeicons=\"Search01Icon\"\n        phosphor=\"MagnifyingGlassIcon\"\n        remixicon=\"RiSearchLine\"\n      />\n    ),\n    label: \"Search\",\n    shortcut: \"⌘K\",\n  },\n  {\n    icon: (\n      <IconPlaceholder\n        lucide=\"PlusIcon\"\n        tabler=\"IconPlus\"\n        hugeicons=\"PlusSignIcon\"\n        phosphor=\"PlusIcon\"\n        remixicon=\"RiAddLine\"\n      />\n    ),\n    label: \"New File\",\n    shortcut: \"⌘N\",\n  },\n  {\n    icon: (\n      <IconPlaceholder\n        lucide=\"SaveIcon\"\n        tabler=\"IconDeviceFloppy\"\n        hugeicons=\"FloppyDiskIcon\"\n        phosphor=\"FloppyDiskIcon\"\n        remixicon=\"RiSaveLine\"\n      />\n    ),\n    label: \"Save\",\n    shortcut: \"⌘S\",\n  },\n  {\n    icon: (\n      <IconPlaceholder\n        lucide=\"SettingsIcon\"\n        tabler=\"IconSettings\"\n        hugeicons=\"SettingsIcon\"\n        phosphor=\"GearIcon\"\n        remixicon=\"RiSettings3Line\"\n      />\n    ),\n    label: \"Settings\",\n    shortcut: \"⌘,\",\n  },\n  {\n    icon: (\n      <IconPlaceholder\n        lucide=\"LogOutIcon\"\n        tabler=\"IconLogout\"\n        hugeicons=\"LogoutSquare01Icon\"\n        phosphor=\"SignOutIcon\"\n        remixicon=\"RiLogoutBoxRLine\"\n      />\n    ),\n    label: \"Sign Out\",\n    shortcut: \"⌘Q\",\n  },\n]\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto flex w-full max-w-64 flex-col gap-0.5\">\n      {commands.map((cmd) => (\n        <Item key={cmd.label} render={<a href=\"#\" />} size=\"xs\">\n          <ItemMedia variant=\"icon\">{cmd.icon}</ItemMedia>\n          <ItemContent>\n            <ItemTitle>{cmd.label}</ItemTitle>\n          </ItemContent>\n          <ItemActions>\n            <Kbd>{cmd.shortcut}</Kbd>\n          </ItemActions>\n        </Item>\n      ))}\n    </div>\n  )\n}","target":"components/examples/c-item-7.tsx"}],"meta":{"order":7}}