@dndbuilder.com/react/dist/packages/react/src/blocks/progress-bar/components/progress-bar.block.js

Drag and drop builder for React

"use client";
import { jsxs as c, jsx as e } from "react/jsx-runtime";
const u = ({ settings: s, meta: r }) => {
  var t, i, n;
  const o = (r == null ? void 0 : r.locale) || "en", a = (i = (t = s.title) == null ? void 0 : t.content) == null ? void 0 : i[o], l = ((n = s.percentage) == null ? void 0 : n.value) || 0;
  return /* @__PURE__ */ c("div", { className: "progress-bar-wrapper", children: [
    a && /* @__PURE__ */ e("div", { className: "progress-bar-title mb-1", children: a }),
    /* @__PURE__ */ e("div", { className: "progress-bar relative h-4 w-full overflow-hidden rounded-full bg-gray-200", children: /* @__PURE__ */ e(
      "div",
      {
        className: "progress-bar-fill h-full rounded-full bg-gray-800 text-white transition-all duration-500 ease-in-out",
        style: { width: `${l}%` },
        children: l > 0 && /* @__PURE__ */ e("div", { className: "progress-bar-percentage flex h-full w-full items-center justify-center px-4 text-xs", children: `${l}%` })
      }
    ) })
  ] });
};
export {
  u as default
};
//# sourceMappingURL=progress-bar.block.js.map