bigblocks/dist/src/components/ui-components/DecorativeBox.js

Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React

import { jsx as _jsx } from "react/jsx-runtime";
import { cn } from "../../lib/utils.js";
/**
 * DecorativeBox component for styled display of bitcoin images and avatars
 *
 * Provides decorative styling with Bitcoin-themed enhancements
 */
export function DecorativeBox({ variant = "bitcoin", borderRadius = "medium", interactive = false, style, children, className, onClick, ...props }) {
    const variantStyles = {
        bitcoin: {
            border: "2px solid var(--primary)",
            background: "linear-gradient(135deg, var(--accent), var(--accent))",
            boxShadow: "0 0 20px var(--accent)",
        },
        golden: {
            border: "2px solid var(--primary)",
            background: "linear-gradient(135deg, var(--accent), var(--accent))",
            boxShadow: "0 0 20px var(--accent)",
        },
        glow: {
            border: "1px solid var(--primary)",
            background: "var(--background)",
            boxShadow: "0 0 30px var(--accent), inset 0 0 20px var(--accent)",
        },
        gradient: {
            border: "2px solid transparent",
            background: "linear-gradient(var(--background), var(--background)) padding-box, linear-gradient(135deg, var(--primary), var(--primary)) border-box",
            boxShadow: "0 4px 20px var(--accent)",
        },
    };
    const radiusStyles = {
        small: { borderRadius: "calc(var(--radius) * 0.5)" },
        medium: { borderRadius: "calc(var(--radius) * 0.75)" },
        large: { borderRadius: "var(--radius)" },
        full: { borderRadius: "50%" },
    };
    const interactiveStyles = interactive
        ? {
            cursor: "pointer",
            transition: "all 0.2s ease",
            ":hover": {
                transform: "scale(1.05)",
                boxShadow: `${variantStyles[variant].boxShadow}, 0 8px 32px var(--accent)`,
            },
        }
        : {};
    const combinedStyle = {
        position: "relative",
        overflow: "hidden",
        ...variantStyles[variant],
        ...radiusStyles[borderRadius],
        ...interactiveStyles,
        ...style,
    };
    return (_jsx("div", { style: combinedStyle, className: cn("relative overflow-hidden", className), onClick: onClick, ...props, children: children }));
}