bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
45 lines (44 loc) • 5.72 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { CheckIcon, ExclamationTriangleIcon } from "@radix-ui/react-icons";
import { responsive } from "../../lib/layout-constants.js";
import { cn } from "../../lib/utils.js";
import { Button } from "../ui/button.js";
import { Card, CardContent } from "../ui/card.js";
import { Progress } from "../ui/progress.js";
import { Separator } from "../ui/separator.js";
export function AuthLayout({ children, title, subtitle, showProgress = false, progressStep = 1, totalSteps = 3, className = "", }) {
return (_jsxs("div", { className: cn("min-h-screen bg-background text-foreground flex flex-col", className), children: [(title || subtitle) && (_jsxs("div", { className: "px-4 py-6 text-center", children: [title && _jsx("h1", { className: "text-3xl font-bold text-center", children: title }), subtitle && (_jsx("p", { className: "text-sm text-muted-foreground text-center", children: subtitle }))] })), _jsx("div", { className: "flex-1 flex items-center justify-center p-4", children: _jsx("div", { className: "w-full max-w-[400px]", children: _jsxs("div", { className: "flex flex-col gap-4", children: [showProgress && totalSteps > 1 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsxs("p", { className: "text-sm text-muted-foreground", children: ["Step ", progressStep, " of ", totalSteps] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [Math.round((progressStep / totalSteps) * 100), "%"] })] }), _jsx(Progress, { value: (progressStep / totalSteps) * 100, className: "h-2" })] })), children] }) }) })] }));
}
export function CenteredLayout({ children, maxWidth = "md", padding = "md", className = "", }) {
const containerSizes = {
sm: "max-w-sm",
md: "max-w-md",
lg: "max-w-lg",
xl: "max-w-xl",
};
const paddingValues = {
none: "p-0",
sm: "p-2",
md: "p-3 sm:p-4",
lg: "p-4 sm:p-6",
};
return (_jsx("div", { className: cn("min-h-screen bg-background text-foreground", className), children: _jsx("div", { className: cn("min-h-screen flex items-center justify-center", paddingValues[padding]), children: _jsx("div", { className: cn("w-full", containerSizes[maxWidth]), children: children }) }) }));
}
export function AuthCard({ children, title, subtitle, footer, variant = "default", className = "", }) {
const cardVariants = {
default: "",
outlined: "border",
elevated: "shadow-lg",
};
return (_jsx(Card, { className: cn(cardVariants[variant], className), children: _jsx(CardContent, { className: "p-6 sm:p-8", children: _jsxs("div", { className: "flex flex-col gap-4 sm:gap-6", children: [(title || subtitle) && (_jsxs("div", { className: "flex flex-col items-center gap-1 sm:gap-2", children: [title && (_jsx("h2", { className: "text-xl sm:text-2xl font-bold text-center", children: title })), subtitle && (_jsx("p", { className: "text-xs sm:text-sm text-muted-foreground text-center", children: subtitle }))] })), _jsx("div", { className: "flex flex-col gap-4 sm:gap-6", children: children }), footer && (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsx("div", { children: footer })] }))] }) }) }));
}
export function LoadingLayout({ title = "Loading...", message, showSpinner = true, className = "", }) {
return (_jsx(CenteredLayout, { className: className, children: _jsxs("div", { className: "flex flex-col items-center gap-3 sm:gap-4 p-6 sm:p-8", children: [showSpinner && (_jsx("div", { className: "animate-spin rounded-full h-8 w-8 sm:h-12 sm:w-12 border-b-2 border-primary" })), _jsx("h3", { className: "text-lg sm:text-xl font-bold text-center", children: title }), message && (_jsx("p", { className: "text-xs sm:text-sm text-muted-foreground text-center", children: message }))] }) }));
}
export function ErrorLayout({ title = "Something went wrong", message, actionLabel = "Try Again", onAction, className = "", }) {
return (_jsx(CenteredLayout, { className: className, children: _jsxs("div", { className: "flex flex-col items-center gap-4 sm:gap-6 p-6 sm:p-8", children: [_jsx("div", { className: "w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-red-100 flex items-center justify-center", children: _jsx(ExclamationTriangleIcon, { className: "w-6 h-6 text-red-600" }) }), _jsxs("div", { className: "flex flex-col items-center gap-1 sm:gap-2", children: [_jsx("h3", { className: "text-lg sm:text-xl font-bold text-center", children: title }), _jsx("p", { className: "text-xs sm:text-sm text-muted-foreground text-center", children: message })] }), onAction && (_jsx(Button, { onClick: onAction, size: "default", children: actionLabel }))] }) }));
}
export function SuccessLayout({ title = "Success!", message, actionLabel = "Continue", onAction, className = "", }) {
return (_jsx(CenteredLayout, { className: className, children: _jsxs("div", { className: cn("flex flex-col items-center", `gap-${responsive.gap.spacious}`, `p-${responsive.spacing.sectionPadding}`), children: [_jsx("div", { className: "w-16 h-16 rounded-full bg-green-100 flex items-center justify-center", children: _jsx(CheckIcon, { className: "w-8 h-8 text-green-600" }) }), _jsxs("div", { className: cn("flex flex-col items-center", `gap-${responsive.gap.tight}`), children: [_jsx("h3", { className: "text-2xl font-bold text-center", children: title }), _jsx("p", { className: "text-sm text-muted-foreground text-center", children: message })] }), onAction && (_jsx(Button, { onClick: onAction, className: "bg-green-600 hover:bg-green-700", children: actionLabel }))] }) }));
}