bigblocks/dist-registry/components/examples-themedemo.json

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

{
  "name": "examples-themedemo",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/examples/ThemeDemo.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { cn } from \"../../lib/utils.js\";\nimport { Badge } from \"../ui/badge.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Card, CardContent } from \"../ui/card.js\";\nimport { Separator } from \"../ui/separator.js\";\n\nexport function ThemeDemo() {\n\treturn (\n\t\t<div className=\"min-h-screen p-6\">\n\t\t\t<div className=\"flex flex-col gap-6\">\n\t\t\t\t<div>\n\t\t\t\t\t<h2 className=\"text-2xl font-bold mb-2\">BigBlocks Theme Demo</h2>\n\t\t\t\t\t<p className=\"text-base text-muted-foreground\">\n\t\t\t\t\t\tUse the Storybook toolbar to change theme settings\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<Separator className=\"my-4\" />\n\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<h3 className=\"text-lg font-bold\">Button Variants</h3>\n\t\t\t\t\t<div className=\"flex gap-3 flex-wrap\">\n\t\t\t\t\t\t<Button>Default</Button>\n\t\t\t\t\t\t<Button variant=\"secondary\">Secondary</Button>\n\t\t\t\t\t\t<Button variant=\"outline\">Outline</Button>\n\t\t\t\t\t\t<Button variant=\"ghost\">Ghost</Button>\n\t\t\t\t\t\t<Button variant=\"link\">Link</Button>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex gap-3 flex-wrap\">\n\t\t\t\t\t\t<Button size=\"sm\">Small</Button>\n\t\t\t\t\t\t<Button size=\"default\">Medium</Button>\n\t\t\t\t\t\t<Button size=\"lg\">Large</Button>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"flex gap-3 flex-wrap\">\n\t\t\t\t\t\t<Button variant=\"default\">Default</Button>\n\t\t\t\t\t\t<Button variant=\"outline\">Outline</Button>\n\t\t\t\t\t\t<Button variant=\"destructive\">Destructive</Button>\n\t\t\t\t\t\t<Button className=\"bg-green-600 hover:bg-green-700\">Success</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<Separator className=\"my-4\" />\n\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<h3 className=\"text-lg font-bold\">Cards and Layout</h3>\n\t\t\t\t\t<div className=\"flex gap-4 flex-wrap\">\n\t\t\t\t\t\t<Card className=\"w-[300px]\">\n\t\t\t\t\t\t\t<CardContent className=\"p-4\">\n\t\t\t\t\t\t\t\t<h4 className=\"text-base font-bold mb-2\">\n\t\t\t\t\t\t\t\t\tAuthentication Card\n\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground mb-3\">\n\t\t\t\t\t\t\t\t\tThis demonstrates how Bitcoin auth components look with the\n\t\t\t\t\t\t\t\t\tcurrent theme.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t\t\t\t\t\t<Button size=\"sm\" variant=\"secondary\">\n\t\t\t\t\t\t\t\t\t\tSign In\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t<Button size=\"sm\" variant=\"outline\">\n\t\t\t\t\t\t\t\t\t\tRegister\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t<Card className=\"w-[300px] bitcoin-card\">\n\t\t\t\t\t\t\t<CardContent className=\"p-4\">\n\t\t\t\t\t\t\t\t<h4 className=\"text-base font-bold mb-2\">\n\t\t\t\t\t\t\t\t\tBitcoin Enhanced Card\n\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground mb-3\">\n\t\t\t\t\t\t\t\t\tUses custom Bitcoin styling with shadcn/ui components.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tclassName=\"bg-purple-100 text-purple-700\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tOrange\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<Separator className=\"my-4\" />\n\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<h3 className=\"text-lg font-bold\">Authentication Preview</h3>\n\t\t\t\t\t<Card className=\"max-w-[400px]\">\n\t\t\t\t\t\t<CardContent className=\"p-6\">\n\t\t\t\t\t\t\t<h4 className=\"text-lg font-bold mb-3\">Bitcoin Authentication</h4>\n\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground mb-4\">\n\t\t\t\t\t\t\t\tChoose your authentication method:\n\t\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t\t<div className=\"flex flex-col gap-3\">\n\t\t\t\t\t\t\t\t<Button variant=\"secondary\" size=\"default\">\n\t\t\t\t\t\t\t\t\tContinue with Google\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t<Button variant=\"secondary\" size=\"default\">\n\t\t\t\t\t\t\t\t\tContinue with GitHub\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t<Button variant=\"default\" size=\"default\">\n\t\t\t\t\t\t\t\t\tGenerate Bitcoin Identity\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div className=\"flex gap-3 mt-4 justify-end\">\n\t\t\t\t\t\t\t\t<Button variant=\"secondary\">Cancel</Button>\n\t\t\t\t\t\t\t\t<Button>Continue</Button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t</Card>\n\t\t\t\t</div>\n\n\t\t\t\t<Separator className=\"my-4\" />\n\n\t\t\t\t<div>\n\t\t\t\t\t<h3 className=\"text-lg font-bold mb-3\">Theme Information</h3>\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardContent className=\"p-4\">\n\t\t\t\t\t\t\t<div className=\"flex flex-col gap-2\">\n\t\t\t\t\t\t\t\t<p className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\tAll styling is powered by shadcn/ui with Bitcoin-specific\n\t\t\t\t\t\t\t\t\tenhancements. Use the Storybook toolbar to control theme\n\t\t\t\t\t\t\t\t\tcolor, light/dark mode, radius, and scaling.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t</Card>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/themedemo.tsx"
    }
  ]
}