@ducor/react
Version:
admin template ui interface
41 lines (40 loc) • 4.18 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FiCheck } from "react-icons/fi";
import { twMerge } from "tailwind-merge";
import { Heading } from "./typography";
import { getColor } from "../helpers/colors";
const Progress = ({ steps = [], currentStep = 0, variant = "horizontal", percent, color = "default", className = "", textColor, }) => {
if (variant === "step") {
// 🟨 Step Variant (Like Your Provided Image)
return (_jsx("div", { className: 'flex w-full max-w-lg', children: steps === null || steps === void 0 ? void 0 : steps.map((step, index) => {
const isActive = index + 1 <= currentStep;
return (_jsxs("div", { className: 'flex-1 text-center relative flex flex-col items-center', children: [_jsx("div", { className: twMerge("w-full h-1 ", isActive
? className || getColor({ variant: "solid", color })
: "bg-gray-200/80") }), _jsx("span", { className: twMerge("text-sm font-medium mt-1 transition-all", textColor || "text-gray-500"), children: step })] }, index));
}) }));
}
if (variant === "percentage") {
const percentage = Math.min(Math.max(percent !== null && percent !== void 0 ? percent : 0, 0), 100);
return (_jsx("div", { className: 'w-full max-w-lg', children: _jsx("div", { className: 'w-full bg-gray-200/80 rounded-full h-2', children: _jsx("div", { className: twMerge(" h-2 rounded-full transition-all duration-300", className || getColor({ variant: "solid", color, active: true })), style: { width: `${percentage}%` } }) }) }));
}
return variant === "horizontal" ? (
// 🟦 Horizontal Progress Bar
_jsx("div", { className: 'flex items-center w-full max-w-lg', children: steps === null || steps === void 0 ? void 0 : steps.map((step, index) => (_jsxs("div", { className: 'flex items-center', children: [_jsx("div", { className: twMerge("w-8 h-8 flex items-center justify-center rounded-full transition-all", index < currentStep
? className ||
getColor({ variant: "solid", color, active: true })
: index === currentStep
? className || getColor({ variant: "outline", color })
: " border-2 border-gray-200/80 text-gray-300"), children: index < currentStep ? (_jsx(FiCheck, { size: 16, className: twMerge(className || "text-gray-300") })) : (index + 1) }), index !== steps.length - 1 && (_jsx("div", { className: twMerge("w-16 h-0.5 transition-all", index < currentStep
? className || getColor({ variant: "solid", color })
: "bg-gray-200/80") }))] }, index))) })) : (
// 🟩 Vertical Progress Bar
_jsx("div", { className: 'flex flex-col w-full max-w-sm', children: steps === null || steps === void 0 ? void 0 : steps.map((step, index) => (_jsxs("div", { className: 'flex items-start space-x-4', children: [_jsxs("div", { className: 'flex flex-col items-center', children: [_jsx("div", { className: twMerge("w-8 h-8 flex items-center justify-center rounded-full transition-all", index < currentStep
? className ||
getColor({ variant: "solid", color, active: true })
: index === currentStep
? className || getColor({ variant: "outline", color })
: "border-2 border-gray-200/80 text-gray-300"), children: index < currentStep ? (_jsx(FiCheck, { size: 16, className: twMerge(className || "text-gray-300") })) : (index + 1) }), index !== steps.length - 1 && (_jsx("div", { className: twMerge("w-0.5 h-6 transition-all", index < currentStep
? className || getColor({ variant: "outline", color })
: "bg-gray-200/80") }))] }), _jsx("div", { children: _jsx(Heading, { as: 'h4', className: twMerge("font-medium transition-all", index < currentStep ? " font-bold" : "", textColor), children: step }) })] }, index))) }));
};
export default Progress;