bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
15 lines • 1.67 kB
JSON
{
"name": "ui-components-loadingbutton",
"type": "registry:component",
"dependencies": [],
"devDependencies": [],
"registryDependencies": [],
"files": [
{
"path": "components/ui-components/LoadingButton.tsx",
"type": "registry:component",
"content": "\"use client\";\nimport { cn } from \"<%- config.aliases.utils %>\";\nimport { Button, type ButtonProps } from \"../ui/button\";\n\nexport interface LoadingButtonProps extends ButtonProps {\n\tloading?: boolean;\n\tloadingText?: string;\n}\n\nexport function LoadingButton({\n\tloading = false,\n\tloadingText,\n\tchildren,\n\tdisabled,\n\tclassName,\n\t...props\n}: LoadingButtonProps) {\n\treturn (\n\t\t<Button disabled={disabled || loading} className={cn(className)} {...props}>\n\t\t\t{loading && (\n\t\t\t\t<svg\n\t\t\t\t\tclassName=\"mr-2 h-4 w-4 animate-spin\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\taria-label=\"Loading\"\n\t\t\t\t>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclassName=\"opacity-25\"\n\t\t\t\t\t\tcx=\"12\"\n\t\t\t\t\t\tcy=\"12\"\n\t\t\t\t\t\tr=\"10\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstrokeWidth=\"4\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path\n\t\t\t\t\t\tclassName=\"opacity-75\"\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\td=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{loading ? loadingText || \"Loading...\" : children}\n\t\t</Button>\n\t);\n}\n",
"target": "<%- config.aliases.components %>/loadingbutton.tsx"
}
]
}