bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
19 lines (18 loc) • 2.5 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CheckIcon } from "@radix-ui/react-icons";
import React from "react";
import { cn } from "../../lib/utils.js";
export function StepIndicator({ steps, className = "", variant = "horizontal", }) {
if (variant === "vertical") {
return (_jsx("div", { className: cn("flex flex-col gap-4", className), children: steps.map((step, index) => (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: cn("min-w-[32px] h-8 rounded-full flex items-center justify-center font-bold text-sm", step.status === "complete" &&
"bg-green-600 dark:bg-green-500 text-white", step.status === "active" &&
"bg-primary text-primary-foreground", step.status === "pending" && "bg-muted text-muted-foreground"), children: step.status === "complete" ? (_jsx(CheckIcon, { className: "h-4 w-4", "aria-label": "Complete" })) : (_jsx("span", { children: index + 1 })) }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: cn("font-medium", step.status === "pending" && "text-muted-foreground"), children: step.label }), step.description && (_jsx("p", { className: "text-sm text-muted-foreground", children: step.description }))] })] }, step.id))) }));
}
// Horizontal variant
return (_jsx("div", { className: cn("flex items-center", className), children: steps.map((step, index) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: cn("w-10 h-10 rounded-full flex items-center justify-center font-bold transition-all", step.status === "complete" &&
"bg-green-600 dark:bg-green-500 text-white", step.status === "active" &&
"bg-primary text-primary-foreground shadow-lg shadow-primary/25", step.status === "pending" && "bg-muted text-muted-foreground"), children: step.status === "complete" ? (_jsx(CheckIcon, { className: "h-5 w-5", "aria-label": "Complete" })) : (_jsx("span", { children: index + 1 })) }), _jsx("p", { className: cn("text-xs mt-2", step.status === "pending" && "text-muted-foreground"), children: step.label })] }), index < steps.length - 1 && (_jsx("div", { className: cn("flex-1 h-0.5 mx-3 transition-colors", steps[index + 1]?.status !== "pending"
? "bg-primary"
: "bg-border") }))] }, step.id))) }));
}