spinner-example.json — ui Source File

Source Code

{
  "$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/radix-vega/examples/spinner-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-vega/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport { Spinner } from \"@/registry/radix-vega/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&apos;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 asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}