bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
75 lines (74 loc) • 7.18 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CONTAINER_WIDTHS, GRID_LAYOUTS, HEIGHTS, LAYOUT_WIDTHS, SPACING, } from "../../lib/layout-constants.js";
import { ProfileCard } from "../profile-management/ProfileCard.js";
import { Card } from "../ui/card.js";
import { ScrollArea } from "../ui/scroll-area.js";
// Example profiles for grid
const mockProfiles = [
{
id: "1",
name: "Alice Bitcoin",
description: "Bitcoin enthusiast and developer",
address: "1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa",
isPublished: true,
},
{
id: "2",
name: "Bob Satoshi",
description: "Blockchain researcher",
address: "1BvBMSEYstWetqTFn5Au4m4GFg7xJaNVN2",
isPublished: false,
},
{
id: "3",
name: "Charlie Node",
description: "Lightning network operator",
address: "1CounterpartyXXXXXXXXXXXXXXXUWLpVr",
isPublished: true,
},
// Add more for grid demo
...Array.from({ length: 6 }, (_, i) => ({
id: String(i + 4),
name: `User ${i + 4}`,
description: "Bitcoin user",
address: `1Address${i + 4}`,
isPublished: i % 2 === 0,
})),
];
export function LayoutExample() {
return (_jsxs("div", { className: "min-h-screen bg-background", children: [_jsx("div", { className: "flex items-center border-b", style: {
height: HEIGHTS.HEADER_DESKTOP,
padding: `0 ${SPACING.LG}`,
}, children: _jsx("span", { className: "text-lg font-bold", children: "Bitcoin Auth UI Layout Example" }) }), _jsxs("div", { className: "flex", style: { minHeight: `calc(100vh - ${HEIGHTS.HEADER_DESKTOP})` }, children: [_jsx("div", { className: "border-r bg-muted/50 hidden md:block", style: {
width: LAYOUT_WIDTHS.SIDEBAR_DEFAULT,
padding: SPACING.MD,
}, children: _jsx(ScrollArea, { style: { height: "100%" }, children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("span", { className: "text-lg font-bold", children: "Navigation" }), _jsx(Card, { children: _jsx("span", { className: "text-sm", children: "Dashboard" }) }), _jsx(Card, { children: _jsx("span", { className: "text-sm", children: "Profiles" }) }), _jsx(Card, { children: _jsx("span", { className: "text-sm", children: "Settings" }) })] }) }) }), _jsx("div", { style: { flex: 1, padding: SPACING.LG }, children: _jsxs("div", { style: {
maxWidth: CONTAINER_WIDTHS.CONTENT_DEFAULT,
margin: "0 auto",
}, children: [_jsxs("div", { className: "mb-8", children: [_jsx("h2", { className: "text-xl font-bold mb-4", children: "Card Widths" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(Card, { className: "p-4", style: { width: CONTAINER_WIDTHS.CARD_SMALL }, children: [_jsx("h3", { className: "text-base font-medium mb-1", children: "Small Card" }), _jsxs("span", { className: "text-sm text-muted-foreground", children: ["Width: ", CONTAINER_WIDTHS.CARD_SMALL] })] }), _jsxs(Card, { className: "p-4", style: { width: CONTAINER_WIDTHS.CARD_MEDIUM }, children: [_jsx("h3", { className: "text-base font-medium mb-1", children: "Medium Card" }), _jsxs("span", { className: "text-sm text-muted-foreground", children: ["Width: ", CONTAINER_WIDTHS.CARD_MEDIUM] })] }), _jsxs(Card, { className: "p-4", style: { width: CONTAINER_WIDTHS.CARD_LARGE }, children: [_jsx("h3", { className: "text-base font-medium mb-1", children: "Large Card" }), _jsxs("span", { className: "text-sm text-muted-foreground", children: ["Width: ", CONTAINER_WIDTHS.CARD_LARGE] })] })] })] }), _jsxs("div", { className: "mb-8", children: [_jsx("h2", { className: "text-xl font-bold mb-4", children: "Modal Widths" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(Card, { style: {
width: CONTAINER_WIDTHS.MODAL_SMALL,
padding: SPACING.MD,
}, children: [_jsx("h3", { className: "text-base font-medium mb-2", children: "Small Modal" }), _jsxs("span", { className: "text-sm text-muted-foreground", children: ["Width: ", CONTAINER_WIDTHS.MODAL_SMALL] }), _jsx("div", { className: "mt-4", children: _jsx("span", { className: "text-sm", children: "Perfect for simple confirmations and small forms." }) })] }), _jsxs(Card, { style: {
width: CONTAINER_WIDTHS.MODAL_DEFAULT,
padding: SPACING.LG,
}, children: [_jsx("h3", { className: "text-base font-medium mb-2", children: "Default Modal" }), _jsxs("span", { className: "text-sm text-muted-foreground", children: ["Width: ", CONTAINER_WIDTHS.MODAL_DEFAULT] }), _jsx("div", { className: "mt-4", children: _jsx("span", { className: "text-sm", children: "Standard modal size for most use cases." }) })] }), _jsxs(Card, { style: {
width: CONTAINER_WIDTHS.MODAL_LARGE,
padding: SPACING.XL,
}, children: [_jsx("h3", { className: "text-base font-medium mb-2", children: "Large Modal" }), _jsxs("span", { className: "text-sm text-muted-foreground", children: ["Width: ", CONTAINER_WIDTHS.MODAL_LARGE] }), _jsx("div", { className: "mt-4", children: _jsx("span", { className: "text-sm", children: "For complex forms and detailed content." }) })] })] })] }), _jsxs("div", { children: [_jsx("h2", { className: "text-xl font-bold mb-4", children: "Responsive Grid Layout" }), _jsx("div", { style: {
display: "grid",
gridTemplateColumns: `repeat(auto-fit, minmax(${GRID_LAYOUTS.RESPONSIVE_CARDS.MIN_WIDTH}, 1fr))`,
gap: SPACING.MD,
}, children: mockProfiles.map((profile) => (_jsx(ProfileCard, { profile: profile, onEdit: () => console.log("Edit", profile.id), menuItems: [
{
label: "Delete",
onClick: () => console.log("Delete", profile.id),
color: "red",
},
{
label: "Publish",
onClick: () => console.log("Publish", profile.id),
color: "green",
},
] }, profile.id))) })] })] }) })] })] }));
}