@athbnb/ui 0.0.2 → 0.0.3

package/dist/ui/CongratulationsBox.js

@@ -0,0 +1,77 @@
+import { c as e } from "react/compiler-runtime";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useEffect as i, useState as a } from "react";
+//#region src/ui/CongratulationsBox.tsx
+function o(t) {
+	let i = e(4), { className: a } = t, o, s;
+	i[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ n("circle", {
+		cx: "40",
+		cy: "40",
+		r: "38",
+		className: "fill-primary",
+		stroke: "currentColor",
+		strokeWidth: "2"
+	}), s = /* @__PURE__ */ n("path", {
+		className: "stroke-white",
+		strokeWidth: "4",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M24 40l11 11 21-22"
+	}), i[0] = o, i[1] = s) : (o = i[0], s = i[1]);
+	let c;
+	return i[2] === a ? c = i[3] : (c = /* @__PURE__ */ r("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 80 80",
+		fill: "none",
+		className: a,
+		"aria-hidden": !0,
+		children: [o, s]
+	}), i[2] = a, i[3] = c), c;
+}
+function s({ title: e = "Congratulations!", message: s = /* @__PURE__ */ n(t, { children: "Your Profile is now \"Verified\"." }), durationMs: c = 3e3, tickMs: l = 50, onComplete: u, className: d = "" }) {
+	let [f, p] = a(0), [m, h] = a(!0);
+	return i(() => {
+		if (c <= 0) return;
+		let e = 100 / c * l, t = window.setInterval(() => {
+			p((n) => {
+				let r = n + e;
+				return r >= 100 ? (window.clearInterval(t), window.setTimeout(() => {
+					h(!1), u?.();
+				}, 100), 100) : r;
+			});
+		}, l);
+		return () => window.clearInterval(t);
+	}, [
+		c,
+		l,
+		u
+	]), m ? /* @__PURE__ */ n("div", {
+		className: `mx-auto w-full max-w-lg py-8 sm:max-w-xl md:max-w-2xl ${d}`.trim(),
+		children: /* @__PURE__ */ r("div", {
+			className: "relative mt-8 flex w-full flex-col gap-4 rounded-primary p-4 shadow-primary sm:gap-8 sm:p-8 lg:p-12",
+			children: [
+				c > 0 ? /* @__PURE__ */ n("div", {
+					className: "absolute top-0 left-0 flex w-full justify-start",
+					children: /* @__PURE__ */ n("div", {
+						className: "h-2 rounded-primary bg-primary transition-all duration-100 ease-linear",
+						style: { width: `${f}%` }
+					})
+				}) : null,
+				/* @__PURE__ */ n("div", {
+					className: "flex justify-center rounded-full",
+					children: /* @__PURE__ */ n(o, { className: "h-16 w-16 text-primary lg:h-24 lg:w-24" })
+				}),
+				/* @__PURE__ */ n("h1", {
+					className: "text-center text-2xl font-bold text-primary sm:text-3xl lg:text-5xl",
+					children: e
+				}),
+				/* @__PURE__ */ n("p", {
+					className: "text-center text-base font-bold text-secondary sm:text-lg lg:text-2xl",
+					children: s
+				})
+			]
+		})
+	}) : null;
+}
+//#endregion
+export { s as CongratulationsBox };