bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
15 lines • 2.69 kB
JSON
{
"name": "ui-components-bitcoinavatar",
"type": "registry:component",
"dependencies": [],
"devDependencies": [],
"registryDependencies": [],
"files": [
{
"path": "components/ui-components/BitcoinAvatar.tsx",
"type": "registry:component",
"content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"../../lib/utils.js\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"../ui/avatar.js\";\nimport { BitcoinImage } from \"./BitcoinImage.js\";\n\nexport interface BitcoinAvatarProps\n\textends Omit<ComponentProps<typeof Avatar>, \"children\"> {\n\t/**\n\t * Image source - can be blockchain URL (b://, ord://, etc.) or regular URL\n\t */\n\tsrc?: string;\n\t/**\n\t * Alt text for accessibility\n\t */\n\talt: string;\n\t/**\n\t * Fallback text when image is not available\n\t */\n\tfallback: string;\n\t/**\n\t * Show loading state for image resolution\n\t */\n\tshowLoading?: boolean;\n\t/**\n\t * Timeout for Bitcoin URL resolution (ms)\n\t */\n\ttimeout?: number;\n\t/**\n\t * Size variant for the avatar\n\t */\n\tsize?: \"sm\" | \"default\" | \"lg\" | \"xl\";\n}\n\n/**\n * BitcoinAvatar combines shadcn/ui Avatar with Bitcoin image resolution\n *\n * Features:\n * - Uses shadcn/ui Avatar components for consistent styling\n * - Resolves Bitcoin URLs (b://, ord://, etc.) via BitcoinImage\n * - Proper fallback handling with initials\n * - Size variants with Tailwind classes\n */\nexport function BitcoinAvatar({\n\tsrc,\n\talt,\n\tfallback,\n\tshowLoading = true,\n\ttimeout = 5000,\n\tsize = \"default\",\n\tclassName,\n\t...avatarProps\n}: BitcoinAvatarProps) {\n\tconst sizeClasses = {\n\t\tsm: \"h-8 w-8\",\n\t\tdefault: \"h-10 w-10\",\n\t\tlg: \"h-12 w-12\",\n\t\txl: \"h-16 w-16\",\n\t};\n\n\t// If it's a Bitcoin URL, use BitcoinImage for resolution\n\tconst isBitcoinUrl =\n\t\tsrc &&\n\t\t(src.startsWith(\"b://\") ||\n\t\t\tsrc.startsWith(\"ord://\") ||\n\t\t\tsrc.startsWith(\"1Sat\"));\n\n\treturn (\n\t\t<Avatar className={cn(sizeClasses[size], className)} {...avatarProps}>\n\t\t\t{src && isBitcoinUrl ? (\n\t\t\t\t<BitcoinImage\n\t\t\t\t\tsrc={src}\n\t\t\t\t\talt={alt}\n\t\t\t\t\tshowLoading={showLoading}\n\t\t\t\t\ttimeout={timeout}\n\t\t\t\t\tclassName=\"aspect-square h-full w-full object-cover\"\n\t\t\t\t\tfallback={<AvatarFallback>{fallback}</AvatarFallback>}\n\t\t\t\t/>\n\t\t\t) : src ? (\n\t\t\t\t<>\n\t\t\t\t\t<AvatarImage src={src} alt={alt} />\n\t\t\t\t\t<AvatarFallback>{fallback}</AvatarFallback>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<AvatarFallback>{fallback}</AvatarFallback>\n\t\t\t)}\n\t\t</Avatar>\n\t);\n}\n",
"target": "<%- config.aliases.components %>/bitcoinavatar.tsx"
}
]
}