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>
18 lines
9.9 KiB
JSON
18 lines
9.9 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "badge-example",
|
|
"title": "Badge",
|
|
"registryDependencies": [
|
|
"badge",
|
|
"spinner",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-lyra/examples/badge-example.tsx",
|
|
"content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n return (\n <ExampleWrapper className=\"lg:grid-cols-1\">\n <BadgeVariants />\n <BadgeWithIconLeft />\n <BadgeWithIconRight />\n <BadgeWithSpinner />\n <BadgeAsLink />\n <BadgeLongText />\n <BadgeCustomColors />\n </ExampleWrapper>\n )\n}\n\nfunction BadgeVariants() {\n return (\n <Example title=\"Variants\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge>Default</Badge>\n <Badge variant=\"secondary\">Secondary</Badge>\n <Badge variant=\"destructive\">Destructive</Badge>\n <Badge variant=\"outline\">Outline</Badge>\n <Badge variant=\"ghost\">Ghost</Badge>\n <Badge variant=\"link\">Link</Badge>\n </div>\n </Example>\n )\n}\n\nfunction BadgeWithIconLeft() {\n return (\n <Example title=\"Icon Left\" className=\"max-w-fit\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge>\n <IconPlaceholder\n lucide=\"BadgeCheck\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadge02Icon\"\n phosphor=\"CheckCircleIcon\"\n data-icon=\"inline-start\"\n />\n Default\n </Badge>\n <Badge variant=\"secondary\">\n <IconPlaceholder\n lucide=\"BadgeCheck\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadge02Icon\"\n phosphor=\"CheckCircleIcon\"\n data-icon=\"inline-start\"\n />\n Secondary\n </Badge>\n <Badge variant=\"destructive\">\n <IconPlaceholder\n lucide=\"BadgeCheck\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadge02Icon\"\n phosphor=\"CheckCircleIcon\"\n data-icon=\"inline-start\"\n />\n Destructive\n </Badge>\n <Badge variant=\"outline\">\n <IconPlaceholder\n lucide=\"BadgeCheck\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadge02Icon\"\n phosphor=\"CheckCircleIcon\"\n data-icon=\"inline-start\"\n />\n Outline\n </Badge>\n <Badge variant=\"ghost\">\n <IconPlaceholder\n lucide=\"BadgeCheck\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadge02Icon\"\n phosphor=\"CheckCircleIcon\"\n data-icon=\"inline-start\"\n />\n Ghost\n </Badge>\n <Badge variant=\"link\">\n <IconPlaceholder\n lucide=\"BadgeCheck\"\n tabler=\"IconRosetteDiscountCheck\"\n hugeicons=\"CheckmarkBadge02Icon\"\n phosphor=\"CheckCircleIcon\"\n data-icon=\"inline-start\"\n />\n Link\n </Badge>\n </div>\n </Example>\n )\n}\n\nfunction BadgeWithIconRight() {\n return (\n <Example title=\"Icon Right\" className=\"max-w-fit\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge>\n Default\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n data-icon=\"inline-end\"\n />\n </Badge>\n <Badge variant=\"secondary\">\n Secondary\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n data-icon=\"inline-end\"\n />\n </Badge>\n <Badge variant=\"destructive\">\n Destructive\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n data-icon=\"inline-end\"\n />\n </Badge>\n <Badge variant=\"outline\">\n Outline\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n data-icon=\"inline-end\"\n />\n </Badge>\n <Badge variant=\"ghost\">\n Ghost\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n data-icon=\"inline-end\"\n />\n </Badge>\n <Badge variant=\"link\">\n Link\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n data-icon=\"inline-end\"\n />\n </Badge>\n </div>\n </Example>\n )\n}\n\nfunction BadgeWithSpinner() {\n return (\n <Example title=\"With Spinner\" className=\"max-w-fit\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge>\n <Spinner data-icon=\"inline-start\" />\n Default\n </Badge>\n <Badge variant=\"secondary\">\n <Spinner data-icon=\"inline-start\" />\n Secondary\n </Badge>\n <Badge variant=\"destructive\">\n <Spinner data-icon=\"inline-start\" />\n Destructive\n </Badge>\n <Badge variant=\"outline\">\n <Spinner data-icon=\"inline-start\" />\n Outline\n </Badge>\n <Badge variant=\"ghost\">\n <Spinner data-icon=\"inline-start\" />\n Ghost\n </Badge>\n <Badge variant=\"link\">\n <Spinner data-icon=\"inline-start\" />\n Link\n </Badge>\n </div>\n </Example>\n )\n}\n\nfunction BadgeAsLink() {\n return (\n <Example title=\"asChild\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge\n render={\n <a href=\"#\">\n Link{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowUpRightIcon\"\n phosphor=\"ArrowUpRightIcon\"\n data-icon=\"inline-end\"\n />\n </a>\n }\n />\n <Badge\n variant=\"secondary\"\n render={\n <a href=\"#\">\n Link{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowUpRightIcon\"\n phosphor=\"ArrowUpRightIcon\"\n data-icon=\"inline-end\"\n />\n </a>\n }\n />\n <Badge\n variant=\"destructive\"\n render={\n <a href=\"#\">\n Link{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowUpRightIcon\"\n phosphor=\"ArrowUpRightIcon\"\n data-icon=\"inline-end\"\n />\n </a>\n }\n />\n <Badge\n variant=\"ghost\"\n render={\n <a href=\"#\">\n Link{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowUpRightIcon\"\n data-icon=\"inline-end\"\n />\n </a>\n }\n />\n </div>\n </Example>\n )\n}\n\nfunction BadgeLongText() {\n return (\n <Example title=\"Long Text\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge variant=\"secondary\">\n A badge with a lot of text to see how it wraps\n </Badge>\n </div>\n </Example>\n )\n}\n\nfunction BadgeCustomColors() {\n return (\n <Example title=\"Custom Colors\" className=\"max-w-fit\">\n <div className=\"flex flex-wrap gap-2\">\n <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n Blue\n </Badge>\n <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n Green\n </Badge>\n <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n Sky\n </Badge>\n <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n Purple\n </Badge>\n <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n Blue\n </Badge>\n <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n Green\n </Badge>\n <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n Sky\n </Badge>\n <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n Purple\n </Badge>\n <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n Red\n </Badge>\n </div>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |