bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
28 lines (27 loc) • 1.54 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utils.js";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
import { BitcoinImage } from "./BitcoinImage.js";
/**
* BitcoinAvatar combines shadcn/ui Avatar with Bitcoin image resolution
*
* Features:
* - Uses shadcn/ui Avatar components for consistent styling
* - Resolves Bitcoin URLs (b://, ord://, etc.) via BitcoinImage
* - Proper fallback handling with initials
* - Size variants with Tailwind classes
*/
export function BitcoinAvatar({ src, alt, fallback, showLoading = true, timeout = 5000, size = "default", className, ...avatarProps }) {
const sizeClasses = {
sm: "h-8 w-8",
default: "h-10 w-10",
lg: "h-12 w-12",
xl: "h-16 w-16",
};
// If it's a Bitcoin URL, use BitcoinImage for resolution
const isBitcoinUrl = src &&
(src.startsWith("b://") ||
src.startsWith("ord://") ||
src.startsWith("1Sat"));
return (_jsx(Avatar, { className: cn(sizeClasses[size], className), ...avatarProps, children: src && isBitcoinUrl ? (_jsx(BitcoinImage, { src: src, alt: alt, showLoading: showLoading, timeout: timeout, className: "aspect-square h-full w-full object-cover", fallback: _jsx(AvatarFallback, { children: fallback }) })) : src ? (_jsxs(_Fragment, { children: [_jsx(AvatarImage, { src: src, alt: alt }), _jsx(AvatarFallback, { children: fallback })] })) : (_jsx(AvatarFallback, { children: fallback })) }));
}