journey-tracker-component/dist/JourneyTracker.js

A Chakra UI journey tracker component with step statuses

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Flex, Text, Icon, VStack } from "@chakra-ui/react";
import { CheckCircle, Circle } from "lucide-react";
export default function JourneyTracker(_a) {
    var steps = _a.steps;
    var completedColor = "red.500";
    var pendingColor = "gray.400";
    var textColor = "gray.700";
    var dateColor = "gray.500";
    return (_jsx(VStack, { align: "start", gap: 4, position: "relative", children: steps.map(function (step, index) {
            var isLast = index === steps.length - 1;
            return (_jsxs(Flex, { align: "center", children: [_jsxs(VStack, { gap: 0, align: "center", children: ["Test", _jsx(Icon, { as: step.status === "completed" ? CheckCircle : Circle, color: step.status === "completed" ? completedColor : pendingColor, boxSize: 5 }), !isLast && (_jsx(Box, { w: "2px", h: "24px", bg: steps[index + 1].status !== "pending"
                                    ? completedColor
                                    : pendingColor }))] }), _jsxs(Box, { ml: 4, children: [_jsx(Text, { fontSize: "sm", color: step.status === "completed" ? completedColor : textColor, fontWeight: step.status === "current" ? "bold" : "normal", children: step.label }), step.dateTime ? (_jsx(Text, { fontSize: "xs", color: dateColor, children: step.dateTime })) : (!isLast && _jsx(Text, { fontSize: "xs", children: "\u00A0" }))] })] }, index));
        }) }));
}