nexpi-ui/lib/Stepper.js

An elegant and minimalist Next.js 14 component library

"use client";
import React from 'react';
import { useState } from 'react';
import Button from './Button';
import Card from './Card';
var Stepper = function (_a) {
    var steps = _a.steps;
    var _b = useState(0), currentStepIndex = _b[0], setCurrentIndex = _b[1];
    var handleAfter = function () {
        if (currentStepIndex < (steps.length - 1)) {
            setCurrentIndex(currentStepIndex + 1);
        }
    };
    var handleBefore = function () {
        setCurrentIndex(currentStepIndex - 1);
    };
    return (React.createElement("div", null,
        React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', margin: '2rem' } }, steps.map(function (_, index) {
            return (React.createElement("div", { key: index, style: {
                    width: '26px', height: '26px',
                    backgroundColor: index === currentStepIndex ? 'var(--nxp-secondary-color)' : 'var(--nxp-secondary-shadow-color)',
                    borderRadius: '50%', marginBottom: '10px', fontSize: '14px', display: 'flex', justifyContent: 'center', alignItems: 'center'
                } },
                React.createElement("span", { style: {
                        display: 'inline-flex', justifyContent: 'center', alignItems: 'center', color: index === currentStepIndex ? 'var(--nxp-background-color)' : 'black'
                    } }, index)));
        })),
        React.createElement(Card, null,
            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
                React.createElement("div", null, steps[currentStepIndex].data),
                React.createElement("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '100%', overflow: 'auto' } },
                    currentStepIndex !== 0 && (React.createElement(Button, { variant: 'void', onClick: handleBefore }, "Before")),
                    React.createElement("div", { style: { flex: 1 } }),
                    React.createElement(Button, { variant: 'primary', onClick: handleAfter }, "After"))))));
};
export default Stepper;
//# sourceMappingURL=Stepper.js.map