geoiq-frontend-ui-kit/dist/index.es48.js

This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.

import e, { useState as a } from "react";
import { Alert as N } from "./index.es18.js";
import { _Dialog as y } from "./index.es37.js";
import { Typography as i } from "./index.es17.js";
import { Button as m } from "./index.es7.js";
import { Input as x } from "./index.es9.js";
const c = ["1", "5", "10", "20", ">50"], _ = ({
  onRequestCredits: h
}) => {
  const [g, u] = a(!1), [n, d] = a(c[0]), [s, f] = a(""), [p, l] = a(""), v = (t) => {
    if (!t)
      return "Phone number is required";
    const r = t.startsWith("+91") ? t.substring(3) : t;
    return /^[6-9]\d{9}$/.test(r) ? "" : "Please enter valid number";
  }, E = (t) => {
    const r = t.target.value;
    f(r), l("");
  }, b = () => {
    const t = v(s);
    if (t) {
      l(t);
      return;
    }
    h(n === ">50" ? "50+" : n, s), o();
  };
  function o() {
    u(!1), setTimeout(() => {
      f(""), l(""), d(c[0]);
    }, 100);
  }
  return /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
    N,
    {
      className: "select-none",
      buttonLabel: "Request for Credits",
      onButtonClick: () => u(!0),
      shortContent: !0,
      showButton: !0,
      title: "Insufficient Credits available!",
      variant: "warning"
    }
  ), /* @__PURE__ */ e.createElement(
    y,
    {
      open: g,
      onOpenChange: o,
      trigger: null,
      contentClassName: "w-min",
      body: /* @__PURE__ */ e.createElement("div", { className: "px-4 py-2 w-72 md:w-[480px]" }, /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ e.createElement(i, { variant: "h3", className: "text-light-2" }, "How many credits do you need?"), /* @__PURE__ */ e.createElement(i, { variant: "body2", className: "text-light-4" }, /* @__PURE__ */ e.createElement("span", { className: "underline" }, "Note:"), " One credit is needed to unlock a site report. Please provide your phone number to make a request.")), /* @__PURE__ */ e.createElement("div", { className: "flex flex-row gap-2 mt-2" }, c.map((t) => /* @__PURE__ */ e.createElement(
        m,
        {
          variant: n === t ? "primary" : "secondary",
          key: t,
          className: n === t ? "" : " bg-light-2",
          size: "sm",
          onClick: () => {
            d(t);
          }
        },
        t
      ))), /* @__PURE__ */ e.createElement("div", { className: "flex flex-col mt-4" }, /* @__PURE__ */ e.createElement(i, { className: "text-sm font-medium mb-1 text-light-2" }, "Phone Number *"), /* @__PURE__ */ e.createElement(
        x,
        {
          id: "phoneNumber",
          type: "tel",
          value: s,
          onChange: E,
          className: "h-12",
          placeholder: "Enter phone number",
          maxLength: 13,
          isError: !!p,
          message: p
        }
      ))),
      footer: /* @__PURE__ */ e.createElement("div", { className: "flex w-full gap-2 justify-evenly" }, /* @__PURE__ */ e.createElement(
        m,
        {
          variant: "secondary",
          onClick: o,
          title: "Cancel"
        }
      ), /* @__PURE__ */ e.createElement(
        m,
        {
          variant: "primary",
          suffixIcon: /* @__PURE__ */ e.createElement(
            "img",
            {
              src: "https://frontend-static-files.geoiq.io/strapi/navbar_credits_247858e26a.svg",
              width: 16,
              height: 16,
              alt: "coin icon",
              className: "ml-1"
            }
          ),
          title: `Request ${n} `,
          onClick: b
        }
      ))
    }
  ));
};
export {
  _ as default
};
//# sourceMappingURL=index.es48.js.map