bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
15 lines • 3.25 kB
JSON
{
"name": "ui-components-decorativebox",
"type": "registry:component",
"dependencies": [],
"devDependencies": [],
"registryDependencies": [],
"files": [
{
"path": "components/ui-components/DecorativeBox.tsx",
"type": "registry:component",
"content": "import type React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\nexport interface DecorativeBoxProps {\n\t/**\n\t * Decorative variant style\n\t */\n\tvariant?: \"bitcoin\" | \"golden\" | \"glow\" | \"gradient\";\n\t/**\n\t * Border radius size\n\t */\n\tborderRadius?: \"small\" | \"medium\" | \"large\" | \"full\";\n\t/**\n\t * Enable hover effects\n\t */\n\tinteractive?: boolean;\n\t/**\n\t * Additional styles\n\t */\n\tstyle?: React.CSSProperties;\n\t/**\n\t * Child elements\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * Additional CSS class\n\t */\n\tclassName?: string;\n\t/**\n\t * Click handler\n\t */\n\tonClick?: () => void;\n}\n\n/**\n * DecorativeBox component for styled display of bitcoin images and avatars\n *\n * Provides decorative styling with Bitcoin-themed enhancements\n */\nexport function DecorativeBox({\n\tvariant = \"bitcoin\",\n\tborderRadius = \"medium\",\n\tinteractive = false,\n\tstyle,\n\tchildren,\n\tclassName,\n\tonClick,\n\t...props\n}: DecorativeBoxProps) {\n\tconst variantStyles = {\n\t\tbitcoin: {\n\t\t\tborder: \"2px solid var(--primary)\",\n\t\t\tbackground: \"linear-gradient(135deg, var(--accent), var(--accent))\",\n\t\t\tboxShadow: \"0 0 20px var(--accent)\",\n\t\t},\n\t\tgolden: {\n\t\t\tborder: \"2px solid var(--primary)\",\n\t\t\tbackground: \"linear-gradient(135deg, var(--accent), var(--accent))\",\n\t\t\tboxShadow: \"0 0 20px var(--accent)\",\n\t\t},\n\t\tglow: {\n\t\t\tborder: \"1px solid var(--primary)\",\n\t\t\tbackground: \"var(--background)\",\n\t\t\tboxShadow: \"0 0 30px var(--accent), inset 0 0 20px var(--accent)\",\n\t\t},\n\t\tgradient: {\n\t\t\tborder: \"2px solid transparent\",\n\t\t\tbackground:\n\t\t\t\t\"linear-gradient(var(--background), var(--background)) padding-box, linear-gradient(135deg, var(--primary), var(--primary)) border-box\",\n\t\t\tboxShadow: \"0 4px 20px var(--accent)\",\n\t\t},\n\t};\n\n\tconst radiusStyles = {\n\t\tsmall: { borderRadius: \"calc(var(--radius) * 0.5)\" },\n\t\tmedium: { borderRadius: \"calc(var(--radius) * 0.75)\" },\n\t\tlarge: { borderRadius: \"var(--radius)\" },\n\t\tfull: { borderRadius: \"50%\" },\n\t};\n\n\tconst interactiveStyles = interactive\n\t\t? {\n\t\t\t\tcursor: \"pointer\",\n\t\t\t\ttransition: \"all 0.2s ease\",\n\t\t\t\t\":hover\": {\n\t\t\t\t\ttransform: \"scale(1.05)\",\n\t\t\t\t\tboxShadow: `${variantStyles[variant].boxShadow}, 0 8px 32px var(--accent)`,\n\t\t\t\t},\n\t\t\t}\n\t\t: {};\n\n\tconst combinedStyle = {\n\t\tposition: \"relative\" as const,\n\t\toverflow: \"hidden\" as const,\n\t\t...variantStyles[variant],\n\t\t...radiusStyles[borderRadius],\n\t\t...interactiveStyles,\n\t\t...style,\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={combinedStyle}\n\t\t\tclassName={cn(\"relative overflow-hidden\", className)}\n\t\t\tonClick={onClick}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n",
"target": "<%- config.aliases.components %>/decorativebox.tsx"
}
]
}