UNPKG

@anoki/fse-ui

Version:

FSE UI components library

78 lines (77 loc) 3.33 kB
import { j as e } from "./index.es244.js"; import o from "./index.es225.js"; import "./index.es3.js"; import './components/ui/VerticalCardStepper/VerticalCardStepper.css';/* empty css */ import { ArrowLink as m } from "./index.es42.js"; import { Link as h } from "./index.es99.js"; import { ExternalLink as x } from "./index.es159.js"; var j = /* @__PURE__ */ ((a) => (a.DATE = "date", a.HEADLINE = "headline", a.ORDERED = "ordered", a.CHECK = "check", a))(j || {}), N = /* @__PURE__ */ ((a) => (a.INTERNAL = "internal", a.EXTERNAL = "external", a))(N || {}); const v = (a) => { const i = o.fromISO(a); return { day: i.toFormat("dd"), month: i.toFormat("LLLL"), year: i.toFormat("yyyy") }; }, T = ({ steps: a, type: i, asLink: s }) => /* @__PURE__ */ e.jsx("div", { className: "vertical-container", children: /* @__PURE__ */ e.jsx("div", { className: "timeline", children: a.map((r, l) => { const c = () => { switch (i) { case "date": { if (!r.meta) return null; const { day: n, month: d, year: t } = v(r.meta); return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [ /* @__PURE__ */ e.jsx("div", { className: "day", children: n }), /* @__PURE__ */ e.jsx("div", { className: "month", children: d }), /* @__PURE__ */ e.jsx("div", { className: "year", children: t }) ] }); } case "headline": return /* @__PURE__ */ e.jsx("div", { className: "headline", children: r.meta }); case "ordered": return /* @__PURE__ */ e.jsx("div", { className: "circle", children: l + 1 }); case "check": return /* @__PURE__ */ e.jsx("div", { className: "circle", children: /* @__PURE__ */ e.jsx("div", { className: "checkmark" }) }); default: return null; } }; return /* @__PURE__ */ e.jsxs("div", { className: "step", children: [ /* @__PURE__ */ e.jsx("div", { className: "meta", children: c() }), /* @__PURE__ */ e.jsx("div", { className: "vertical-line", children: /* @__PURE__ */ e.jsx("div", { className: "dot" }) }), /* @__PURE__ */ e.jsxs("div", { className: "card", children: [ /* @__PURE__ */ e.jsx("div", { className: "label", children: r.label }), /* @__PURE__ */ e.jsx("div", { className: "title", children: r.title }), /* @__PURE__ */ e.jsxs("div", { className: "", children: [ /* @__PURE__ */ e.jsx("div", { className: "description pb-x12", children: r.description }), /* @__PURE__ */ e.jsxs("div", { className: "card-footer", children: [ r.link && (r.linkType === "internal" || !r.linkType) && /* @__PURE__ */ e.jsx( m, { href: r.link.link, className: "card-footer-detail", children: r.link.title } ), r.link && r.linkType === "external" && /* @__PURE__ */ e.jsx( h, { title: "", src: r.link.link, icon: x, decoration: "ui-footer-logo-link", transform: "none", external: !0, asLink: s } ) ] }) ] }) ] }) ] }, l); }) }) }); export { N as LinkTypeEnum, j as StepVariantEnum, T as VerticalCardStepper }; //# sourceMappingURL=index.es124.js.map