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

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

{
  "name": "examples-layoutexample",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/examples/LayoutExample.tsx",
      "type": "registry:component",
      "content": "\"use client\";\nimport {\n\tBREAKPOINTS,\n\tCONTAINER_WIDTHS,\n\tGRID_LAYOUTS,\n\tHEIGHTS,\n\tLAYOUT_WIDTHS,\n\tSPACING,\n\tmediaQuery,\n} from \"../../lib/layout-constants.js\";\nimport type { ProfileInfo } from \"../../lib/types.js\";\nimport { cn } from \"../../lib/utils.js\";\nimport { ProfileCard } from \"../profile-management/ProfileCard.js\";\nimport { Card, CardContent } from \"../ui/card.js\";\nimport { ScrollArea } from \"../ui/scroll-area.js\";\n\n// Example profiles for grid\nconst mockProfiles: ProfileInfo[] = [\n\t{\n\t\tid: \"1\",\n\t\tname: \"Alice Bitcoin\",\n\t\tdescription: \"Bitcoin enthusiast and developer\",\n\t\taddress: \"1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa\",\n\t\tisPublished: true,\n\t},\n\t{\n\t\tid: \"2\",\n\t\tname: \"Bob Satoshi\",\n\t\tdescription: \"Blockchain researcher\",\n\t\taddress: \"1BvBMSEYstWetqTFn5Au4m4GFg7xJaNVN2\",\n\t\tisPublished: false,\n\t},\n\t{\n\t\tid: \"3\",\n\t\tname: \"Charlie Node\",\n\t\tdescription: \"Lightning network operator\",\n\t\taddress: \"1CounterpartyXXXXXXXXXXXXXXXUWLpVr\",\n\t\tisPublished: true,\n\t},\n\t// Add more for grid demo\n\t...Array.from({ length: 6 }, (_, i) => ({\n\t\tid: String(i + 4),\n\t\tname: `User ${i + 4}`,\n\t\tdescription: \"Bitcoin user\",\n\t\taddress: `1Address${i + 4}`,\n\t\tisPublished: i % 2 === 0,\n\t})),\n];\n\nexport function LayoutExample() {\n\treturn (\n\t\t<div className=\"min-h-screen bg-background\">\n\t\t\t{/* Header with fixed height */}\n\t\t\t<div\n\t\t\t\tclassName=\"flex items-center border-b\"\n\t\t\t\tstyle={{\n\t\t\t\t\theight: HEIGHTS.HEADER_DESKTOP,\n\t\t\t\t\tpadding: `0 ${SPACING.LG}`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<span className=\"text-lg font-bold\">\n\t\t\t\t\tBitcoin Auth UI Layout Example\n\t\t\t\t</span>\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tclassName=\"flex\"\n\t\t\t\tstyle={{ minHeight: `calc(100vh - ${HEIGHTS.HEADER_DESKTOP})` }}\n\t\t\t>\n\t\t\t\t{/* Sidebar */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"border-r bg-muted/50 hidden md:block\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: LAYOUT_WIDTHS.SIDEBAR_DEFAULT,\n\t\t\t\t\t\tpadding: SPACING.MD,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ScrollArea style={{ height: \"100%\" }}>\n\t\t\t\t\t\t<div className=\"flex flex-col gap-3\">\n\t\t\t\t\t\t\t<span className=\"text-lg font-bold\">Navigation</span>\n\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t<span className=\"text-sm\">Dashboard</span>\n\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t<span className=\"text-sm\">Profiles</span>\n\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t<span className=\"text-sm\">Settings</span>\n\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ScrollArea>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Main Content Area */}\n\t\t\t\t<div style={{ flex: 1, padding: SPACING.LG }}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmaxWidth: CONTAINER_WIDTHS.CONTENT_DEFAULT,\n\t\t\t\t\t\t\tmargin: \"0 auto\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Cards Section */}\n\t\t\t\t\t\t<div className=\"mb-8\">\n\t\t\t\t\t\t\t<h2 className=\"text-xl font-bold mb-4\">Card Widths</h2>\n\t\t\t\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t\t\t\t<Card\n\t\t\t\t\t\t\t\t\tclassName=\"p-4\"\n\t\t\t\t\t\t\t\t\tstyle={{ width: CONTAINER_WIDTHS.CARD_SMALL }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<h3 className=\"text-base font-medium mb-1\">Small Card</h3>\n\t\t\t\t\t\t\t\t\t<span className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\tWidth: {CONTAINER_WIDTHS.CARD_SMALL}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t\t<Card\n\t\t\t\t\t\t\t\t\tclassName=\"p-4\"\n\t\t\t\t\t\t\t\t\tstyle={{ width: CONTAINER_WIDTHS.CARD_MEDIUM }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<h3 className=\"text-base font-medium mb-1\">Medium Card</h3>\n\t\t\t\t\t\t\t\t\t<span className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\tWidth: {CONTAINER_WIDTHS.CARD_MEDIUM}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t\t<Card\n\t\t\t\t\t\t\t\t\tclassName=\"p-4\"\n\t\t\t\t\t\t\t\t\tstyle={{ width: CONTAINER_WIDTHS.CARD_LARGE }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<h3 className=\"text-base font-medium mb-1\">Large Card</h3>\n\t\t\t\t\t\t\t\t\t<span className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\tWidth: {CONTAINER_WIDTHS.CARD_LARGE}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* Modal Widths Section */}\n\t\t\t\t\t\t<div className=\"mb-8\">\n\t\t\t\t\t\t\t<h2 className=\"text-xl font-bold mb-4\">Modal Widths</h2>\n\t\t\t\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t\t\t\t<Card\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\twidth: CONTAINER_WIDTHS.MODAL_SMALL,\n\t\t\t\t\t\t\t\t\t\tpadding: SPACING.MD,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<h3 className=\"text-base font-medium mb-2\">Small Modal</h3>\n\t\t\t\t\t\t\t\t\t<span className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\tWidth: {CONTAINER_WIDTHS.MODAL_SMALL}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<div className=\"mt-4\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-sm\">\n\t\t\t\t\t\t\t\t\t\t\tPerfect for simple confirmations and small forms.\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t\t<Card\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\twidth: CONTAINER_WIDTHS.MODAL_DEFAULT,\n\t\t\t\t\t\t\t\t\t\tpadding: SPACING.LG,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<h3 className=\"text-base font-medium mb-2\">Default Modal</h3>\n\t\t\t\t\t\t\t\t\t<span className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\tWidth: {CONTAINER_WIDTHS.MODAL_DEFAULT}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<div className=\"mt-4\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-sm\">\n\t\t\t\t\t\t\t\t\t\t\tStandard modal size for most use cases.\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t\t<Card\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\twidth: CONTAINER_WIDTHS.MODAL_LARGE,\n\t\t\t\t\t\t\t\t\t\tpadding: SPACING.XL,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<h3 className=\"text-base font-medium mb-2\">Large Modal</h3>\n\t\t\t\t\t\t\t\t\t<span className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\tWidth: {CONTAINER_WIDTHS.MODAL_LARGE}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<div className=\"mt-4\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-sm\">\n\t\t\t\t\t\t\t\t\t\t\tFor complex forms and detailed content.\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* Grid Layout Section */}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<h2 className=\"text-xl font-bold mb-4\">Responsive Grid Layout</h2>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: \"grid\",\n\t\t\t\t\t\t\t\t\tgridTemplateColumns: `repeat(auto-fit, minmax(${GRID_LAYOUTS.RESPONSIVE_CARDS.MIN_WIDTH}, 1fr))`,\n\t\t\t\t\t\t\t\t\tgap: SPACING.MD,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{mockProfiles.map((profile) => (\n\t\t\t\t\t\t\t\t\t<ProfileCard\n\t\t\t\t\t\t\t\t\t\tkey={profile.id}\n\t\t\t\t\t\t\t\t\t\tprofile={profile}\n\t\t\t\t\t\t\t\t\t\tonEdit={() => console.log(\"Edit\", profile.id)}\n\t\t\t\t\t\t\t\t\t\tmenuItems={[\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tlabel: \"Delete\",\n\t\t\t\t\t\t\t\t\t\t\t\tonClick: () => console.log(\"Delete\", profile.id),\n\t\t\t\t\t\t\t\t\t\t\t\tcolor: \"red\",\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tlabel: \"Publish\",\n\t\t\t\t\t\t\t\t\t\t\t\tonClick: () => console.log(\"Publish\", profile.id),\n\t\t\t\t\t\t\t\t\t\t\t\tcolor: \"green\",\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/layoutexample.tsx"
    }
  ]
}