mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-02 17:08:39 +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>
22 lines
4.6 KiB
JSON
22 lines
4.6 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "spinner-example",
|
|
"title": "Spinner",
|
|
"registryDependencies": [
|
|
"badge",
|
|
"button",
|
|
"empty",
|
|
"field",
|
|
"input-group",
|
|
"spinner",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-nova/examples/spinner-example.tsx",
|
|
"content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\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 { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n return (\n <ExampleWrapper>\n <SpinnerBasic />\n <SpinnerInButtons />\n <SpinnerInBadges />\n <SpinnerInInputGroup />\n <SpinnerInEmpty />\n </ExampleWrapper>\n )\n}\n\nfunction SpinnerBasic() {\n return (\n <Example title=\"Basic\">\n <div className=\"flex items-center gap-6\">\n <Spinner />\n <Spinner className=\"size-6\" />\n </div>\n </Example>\n )\n}\n\nfunction SpinnerInButtons() {\n return (\n <Example title=\"In Buttons\">\n <div className=\"flex flex-wrap items-center gap-4\">\n <Button>\n <Spinner data-icon=\"inline-start\" /> Submit\n </Button>\n <Button disabled>\n <Spinner data-icon=\"inline-start\" /> Disabled\n </Button>\n <Button variant=\"outline\" disabled>\n <Spinner data-icon=\"inline-start\" /> Outline\n </Button>\n <Button variant=\"outline\" size=\"icon\" disabled>\n <Spinner data-icon=\"inline-start\" />\n <span className=\"sr-only\">Loading...</span>\n </Button>\n </div>\n </Example>\n )\n}\n\nfunction SpinnerInBadges() {\n return (\n <Example title=\"In Badges\" className=\"items-center justify-center\">\n <div className=\"flex flex-wrap items-center justify-center gap-4\">\n <Badge>\n <Spinner data-icon=\"inline-start\" />\n Badge\n </Badge>\n <Badge variant=\"secondary\">\n <Spinner data-icon=\"inline-start\" />\n Badge\n </Badge>\n <Badge variant=\"destructive\">\n <Spinner data-icon=\"inline-start\" />\n Badge\n </Badge>\n <Badge variant=\"outline\">\n <Spinner data-icon=\"inline-start\" />\n Badge\n </Badge>\n </div>\n </Example>\n )\n}\n\nfunction SpinnerInInputGroup() {\n return (\n <Example title=\"In Input Group\">\n <Field>\n <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n <InputGroup>\n <InputGroupInput id=\"input-group-spinner\" />\n <InputGroupAddon>\n <Spinner />\n </InputGroupAddon>\n </InputGroup>\n </Field>\n </Example>\n )\n}\n\nfunction SpinnerInEmpty() {\n return (\n <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n <Empty className=\"min-h-[300px]\">\n <EmptyHeader>\n <EmptyMedia variant=\"icon\">\n <Spinner />\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 nativeButton={false}\n className=\"text-muted-foreground\"\n >\n Learn more{\" \"}\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight02Icon\"\n phosphor=\"ArrowRightIcon\"\n />\n </Button>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |