@frank-auth/react/dist/esm/components/auth/verification/email-verification/email-verification-status.js

Flexible and customizable React UI components for Frank Authentication

'use client';
import { jsxs as m, jsx as e } from "react/jsx-runtime";
import "@emotion/styled";
import { Button as f } from "../../../ui/button/button.js";
import { Chip as u } from "../../../ui/chip/chip.js";
import { useConfig as d } from "../../../../hooks/use-config.js";
import { ArrowPathIcon as p, EnvelopeIcon as c, XCircleIcon as n, CheckCircleIcon as g } from "@heroicons/react/24/outline";
import { withErrorBoundary as h } from "../../common/error-boundary.js";
const I = h(
  function({
    status: r,
    email: i,
    onRetry: t,
    className: s
  }) {
    const { components: a } = d(), l = a.Button ?? f, o = (() => {
      switch (r) {
        case "sent":
          return {
            color: "primary",
            icon: /* @__PURE__ */ e(c, { className: "h-4 w-4" }),
            message: `Verification code sent to ${i}`
          };
        case "verified":
          return {
            color: "success",
            icon: /* @__PURE__ */ e(g, { className: "h-4 w-4" }),
            message: `Email ${i} verified successfully`
          };
        case "error":
          return {
            color: "danger",
            icon: /* @__PURE__ */ e(n, { className: "h-4 w-4" }),
            message: "Verification failed"
          };
        case "expired":
          return {
            color: "warning",
            icon: /* @__PURE__ */ e(n, { className: "h-4 w-4" }),
            message: "Verification code expired"
          };
        default:
          return {
            color: "default",
            icon: /* @__PURE__ */ e(c, { className: "h-4 w-4" }),
            message: "Email verification"
          };
      }
    })();
    return /* @__PURE__ */ m(
      "div",
      {
        className: `flex items-center justify-between p-3 rounded-lg ${s || ""}`,
        children: [
          /* @__PURE__ */ e("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ e(u, { color: o.color, variant: "flat", startContent: o.icon, children: o.message }) }),
          (r === "error" || r === "expired") && t && /* @__PURE__ */ e(
            l,
            {
              size: "sm",
              color: "primary",
              variant: "flat",
              onClick: t,
              startContent: /* @__PURE__ */ e(p, { className: "h-3 w-3" }),
              children: "Retry"
            }
          )
        ]
      }
    );
  }
);
export {
  I as EmailVerificationStatus
};
//# sourceMappingURL=email-verification-status.js.map