mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-09 06:55:07 +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
4.6 KiB
JSON
20 lines
4.6 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "kbd-example",
|
|
"title": "Kbd",
|
|
"registryDependencies": [
|
|
"button",
|
|
"input-group",
|
|
"kbd",
|
|
"tooltip",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-lyra/examples/kbd-example.tsx",
|
|
"content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n return (\n <ExampleWrapper>\n <KbdBasic />\n <KbdModifierKeys />\n <KbdGroupExample />\n <KbdArrowKeys />\n <KbdWithIcons />\n <KbdWithIconsAndText />\n <KbdInInputGroup />\n <KbdInTooltip />\n <KbdWithSamp />\n </ExampleWrapper>\n )\n}\n\nfunction KbdBasic() {\n return (\n <Example title=\"Basic\">\n <div className=\"flex items-center gap-2\">\n <Kbd>Ctrl</Kbd>\n <Kbd>⌘K</Kbd>\n <Kbd>Ctrl + B</Kbd>\n </div>\n </Example>\n )\n}\n\nfunction KbdModifierKeys() {\n return (\n <Example title=\"Modifier Keys\">\n <div className=\"flex items-center gap-2\">\n <Kbd>⌘</Kbd>\n <Kbd>C</Kbd>\n </div>\n </Example>\n )\n}\n\nfunction KbdGroupExample() {\n return (\n <Example title=\"KbdGroup\">\n <KbdGroup>\n <Kbd>Ctrl</Kbd>\n <Kbd>Shift</Kbd>\n <Kbd>P</Kbd>\n </KbdGroup>\n </Example>\n )\n}\n\nfunction KbdArrowKeys() {\n return (\n <Example title=\"Arrow Keys\">\n <div className=\"flex items-center gap-2\">\n <Kbd>↑</Kbd>\n <Kbd>↓</Kbd>\n <Kbd>←</Kbd>\n <Kbd>→</Kbd>\n </div>\n </Example>\n )\n}\n\nfunction KbdWithIcons() {\n return (\n <Example title=\"With Icons\">\n <KbdGroup>\n <Kbd>\n <IconPlaceholder\n lucide=\"CircleDashedIcon\"\n tabler=\"IconCircleDashed\"\n hugeicons=\"DashedLineCircleIcon\"\n phosphor=\"CircleDashedIcon\"\n />\n </Kbd>\n <Kbd>\n <IconPlaceholder\n lucide=\"ArrowLeftIcon\"\n tabler=\"IconArrowLeft\"\n hugeicons=\"ArrowLeft01Icon\"\n phosphor=\"ArrowLeftIcon\"\n />\n </Kbd>\n <Kbd>\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"ArrowRightIcon\"\n />\n </Kbd>\n </KbdGroup>\n </Example>\n )\n}\n\nfunction KbdWithIconsAndText() {\n return (\n <Example title=\"With Icons and Text\">\n <KbdGroup>\n <Kbd>\n <IconPlaceholder\n lucide=\"ArrowLeftIcon\"\n tabler=\"IconArrowLeft\"\n hugeicons=\"ArrowLeft01Icon\"\n phosphor=\"ArrowLeftIcon\"\n />\n Left\n </Kbd>\n <Kbd>\n <IconPlaceholder\n lucide=\"CircleDashedIcon\"\n tabler=\"IconCircleDashed\"\n hugeicons=\"DashedLineCircleIcon\"\n phosphor=\"CircleDashedIcon\"\n />\n Voice Enabled\n </Kbd>\n </KbdGroup>\n </Example>\n )\n}\n\nfunction KbdInInputGroup() {\n return (\n <Example title=\"InputGroup\">\n <InputGroup>\n <InputGroupInput />\n <InputGroupAddon>\n <Kbd>Space</Kbd>\n </InputGroupAddon>\n </InputGroup>\n </Example>\n )\n}\n\nfunction KbdInTooltip() {\n return (\n <Example title=\"Tooltip\">\n <Tooltip>\n <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n <IconPlaceholder\n lucide=\"SaveIcon\"\n tabler=\"IconDeviceFloppy\"\n hugeicons=\"FloppyDiskIcon\"\n phosphor=\"FloppyDiskIcon\"\n />\n </TooltipTrigger>\n <TooltipContent className=\"pr-1.5\">\n <div className=\"flex items-center gap-2\">\n Save Changes <Kbd>S</Kbd>\n </div>\n </TooltipContent>\n </Tooltip>\n </Example>\n )\n}\n\nfunction KbdWithSamp() {\n return (\n <Example title=\"With samp\">\n <Kbd>\n <samp>File</samp>\n </Kbd>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |