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
8.0 KiB
JSON
20 lines
8.0 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "empty-example",
|
|
"title": "Empty",
|
|
"registryDependencies": [
|
|
"button",
|
|
"empty",
|
|
"input-group",
|
|
"kbd",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-lyra/examples/empty-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 Empty,\n EmptyContent,\n EmptyDescription,\n EmptyHeader,\n EmptyMedia,\n EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n return (\n <ExampleWrapper>\n <EmptyBasic />\n <EmptyWithMutedBackground />\n <EmptyWithBorder />\n <EmptyWithIcon />\n <EmptyWithMutedBackgroundAlt />\n <EmptyInCard />\n </ExampleWrapper>\n )\n}\n\nfunction EmptyBasic() {\n return (\n <Example title=\"Basic\">\n <Empty>\n <EmptyHeader>\n <EmptyTitle>No projects yet</EmptyTitle>\n <EmptyDescription>\n You haven't created any projects yet. Get started by creating\n your first project.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <div className=\"flex gap-2\">\n <Button render={<a href=\"#\" />} nativeButton={false}>\n Create project\n </Button>\n <Button variant=\"outline\">Import project</Button>\n </div>\n <Button\n variant=\"link\"\n render={<a href=\"#\" />}\n className=\"text-muted-foreground\"\n nativeButton={false}\n >\n Learn more{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowUpRight01Icon\"\n phosphor=\"ArrowUpRightIcon\"\n />\n </Button>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n\nfunction EmptyWithMutedBackground() {\n return (\n <Example title=\"With Muted Background\">\n <Empty className=\"bg-muted\">\n <EmptyHeader>\n <EmptyTitle>No results found</EmptyTitle>\n <EmptyDescription>\n No results found for your search. Try adjusting your search terms.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <Button>Try again</Button>\n <Button\n variant=\"link\"\n render={<a href=\"#\" />}\n className=\"text-muted-foreground\"\n nativeButton={false}\n >\n Learn more{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowUpRight01Icon\"\n phosphor=\"ArrowUpRightIcon\"\n />\n </Button>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n\nfunction EmptyWithBorder() {\n return (\n <Example title=\"With Border\">\n <Empty className=\"border\">\n <EmptyHeader>\n <EmptyTitle>404 - Not Found</EmptyTitle>\n <EmptyDescription>\n The page you're looking for doesn't exist. Try searching\n for what you need below.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <InputGroup className=\"w-3/4\">\n <InputGroupInput placeholder=\"Try searching for pages...\" />\n <InputGroupAddon>\n <IconPlaceholder\n lucide=\"CircleDashedIcon\"\n tabler=\"IconCircleDashed\"\n hugeicons=\"DashedLineCircleIcon\"\n phosphor=\"CircleDashedIcon\"\n />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Kbd>/</Kbd>\n </InputGroupAddon>\n </InputGroup>\n <EmptyDescription>\n Need help? <a href=\"#\">Contact support</a>\n </EmptyDescription>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n\nfunction EmptyWithIcon() {\n return (\n <Example title=\"With Icon\">\n <Empty className=\"border\">\n <EmptyHeader>\n <EmptyMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"FolderIcon\"\n tabler=\"IconFolder\"\n hugeicons=\"Folder01Icon\"\n phosphor=\"FolderIcon\"\n />\n </EmptyMedia>\n <EmptyTitle>Nothing to see here</EmptyTitle>\n <EmptyDescription>\n No posts have been created yet. Get started by{\" \"}\n <a href=\"#\">creating your first post</a>.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <Button variant=\"outline\">\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n data-icon=\"inline-start\"\n />\n New Post\n </Button>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n return (\n <Example title=\"With Muted Background Alt\">\n <Empty className=\"bg-muted/50\">\n <EmptyHeader>\n <EmptyTitle>404 - Not Found</EmptyTitle>\n <EmptyDescription>\n The page you're looking for doesn't exist. Try searching\n for what you need below.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <InputGroup className=\"w-3/4\">\n <InputGroupInput placeholder=\"Try searching for pages...\" />\n <InputGroupAddon>\n <IconPlaceholder\n lucide=\"CircleDashedIcon\"\n tabler=\"IconCircleDashed\"\n hugeicons=\"DashedLineCircleIcon\"\n phosphor=\"CircleDashedIcon\"\n />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Kbd>/</Kbd>\n </InputGroupAddon>\n </InputGroup>\n <EmptyDescription>\n Need help? <a href=\"#\">Contact support</a>\n </EmptyDescription>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n\nfunction EmptyInCard() {\n return (\n <Example title=\"In Card\">\n <Empty>\n <EmptyHeader>\n <EmptyMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"FolderIcon\"\n tabler=\"IconFolder\"\n hugeicons=\"Folder01Icon\"\n phosphor=\"FolderIcon\"\n />\n </EmptyMedia>\n <EmptyTitle>No projects yet</EmptyTitle>\n <EmptyDescription>\n You haven't created any projects yet. Get started by creating\n your first project.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <div className=\"flex gap-2\">\n <Button render={<a href=\"#\" />} nativeButton={false}>\n Create project\n </Button>\n <Button variant=\"outline\">Import project</Button>\n </div>\n <Button\n variant=\"link\"\n render={<a href=\"#\" />}\n className=\"text-muted-foreground\"\n nativeButton={false}\n >\n Learn more{\" \"}\n <IconPlaceholder\n lucide=\"ArrowUpRightIcon\"\n tabler=\"IconArrowUpRight\"\n hugeicons=\"ArrowUpRight01Icon\"\n phosphor=\"ArrowUpRightIcon\"\n />\n </Button>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |