phx-react
Version:
PHX REACT
21 lines • 1.88 kB
JavaScript
;
exports.__esModule = true;
exports.PHXStepCircle = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var types_1 = require("../types");
function PHXStepCircle(_a) {
var className = _a.className, steps = _a.steps;
return (react_1["default"].createElement("nav", { "aria-label": 'Progress', className: className },
react_1["default"].createElement("ol", { className: 'overflow-hidden' }, steps.map(function (step, stepIdx) { return (react_1["default"].createElement("li", { key: stepIdx + 1, className: (0, types_1.classNames)(stepIdx !== steps.length - 1 ? 'mb-6' : '', 'relative') },
react_1["default"].createElement(react_1["default"].Fragment, null,
stepIdx !== steps.length - 1 ? (react_1["default"].createElement("div", { "aria-hidden": 'true', className: 'absolute left-2 top-5 ml-px mt-0.5 h-full w-[1px] bg-gray-300' })) : null,
react_1["default"].createElement("div", { className: 'relative flex items-start' },
react_1["default"].createElement("span", { className: 'relative z-10 flex h-5 w-5 items-center justify-center rounded-full border border-gray-900 bg-white' },
react_1["default"].createElement("span", { className: '-ml-px rounded-full bg-transparent text-xs' }, stepIdx + 1)),
react_1["default"].createElement("span", { className: 'ml-2 flex min-w-0 flex-col gap-y-1 w-full' },
react_1["default"].createElement("span", { className: 'text-xs font-semibold text-gray-900' }, step.title),
(step === null || step === void 0 ? void 0 : step.component) && react_1["default"].createElement("span", { className: 'text-xs' }, step.component)))))); }))));
}
exports.PHXStepCircle = PHXStepCircle;
//# sourceMappingURL=StepCircle.js.map