bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
10 lines (9 loc) • 4.5 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Badge } from "../ui/badge.js";
import { Button } from "../ui/button.js";
import { Card, CardContent } from "../ui/card.js";
import { Separator } from "../ui/separator.js";
export function ThemeDemo() {
return (_jsx("div", { className: "min-h-screen p-6", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold mb-2", children: "BigBlocks Theme Demo" }), _jsx("p", { className: "text-base text-muted-foreground", children: "Use the Storybook toolbar to change theme settings" })] }), _jsx(Separator, { className: "my-4" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("h3", { className: "text-lg font-bold", children: "Button Variants" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(Button, { children: "Default" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "outline", children: "Outline" }), _jsx(Button, { variant: "ghost", children: "Ghost" }), _jsx(Button, { variant: "link", children: "Link" })] }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "default", children: "Medium" }), _jsx(Button, { size: "lg", children: "Large" })] }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(Button, { variant: "default", children: "Default" }), _jsx(Button, { variant: "outline", children: "Outline" }), _jsx(Button, { variant: "destructive", children: "Destructive" }), _jsx(Button, { className: "bg-green-600 hover:bg-green-700", children: "Success" })] })] }), _jsx(Separator, { className: "my-4" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("h3", { className: "text-lg font-bold", children: "Cards and Layout" }), _jsxs("div", { className: "flex gap-4 flex-wrap", children: [_jsx(Card, { className: "w-[300px]", children: _jsxs(CardContent, { className: "p-4", children: [_jsx("h4", { className: "text-base font-bold mb-2", children: "Authentication Card" }), _jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "This demonstrates how Bitcoin auth components look with the current theme." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "secondary", children: "Sign In" }), _jsx(Button, { size: "sm", variant: "outline", children: "Register" })] })] }) }), _jsx(Card, { className: "w-[300px] bitcoin-card", children: _jsxs(CardContent, { className: "p-4", children: [_jsx("h4", { className: "text-base font-bold mb-2", children: "Bitcoin Enhanced Card" }), _jsx("p", { className: "text-sm text-muted-foreground mb-3", children: "Uses custom Bitcoin styling with shadcn/ui components." }), _jsx(Badge, { variant: "secondary", className: "bg-purple-100 text-purple-700", children: "Orange" })] }) })] })] }), _jsx(Separator, { className: "my-4" }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("h3", { className: "text-lg font-bold", children: "Authentication Preview" }), _jsx(Card, { className: "max-w-[400px]", children: _jsxs(CardContent, { className: "p-6", children: [_jsx("h4", { className: "text-lg font-bold mb-3", children: "Bitcoin Authentication" }), _jsx("p", { className: "text-sm text-muted-foreground mb-4", children: "Choose your authentication method:" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Button, { variant: "secondary", size: "default", children: "Continue with Google" }), _jsx(Button, { variant: "secondary", size: "default", children: "Continue with GitHub" }), _jsx(Button, { variant: "default", size: "default", children: "Generate Bitcoin Identity" })] }), _jsxs("div", { className: "flex gap-3 mt-4 justify-end", children: [_jsx(Button, { variant: "secondary", children: "Cancel" }), _jsx(Button, { children: "Continue" })] })] }) })] }), _jsx(Separator, { className: "my-4" }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-bold mb-3", children: "Theme Information" }), _jsx(Card, { children: _jsx(CardContent, { className: "p-4", children: _jsx("div", { className: "flex flex-col gap-2", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "All styling is powered by shadcn/ui with Bitcoin-specific enhancements. Use the Storybook toolbar to control theme color, light/dark mode, radius, and scaling." }) }) }) })] })] }) }));
}