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

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

import { Typography as s } from "./index.es19.js";
import { Dropdown as C } from "./index.es22.js";
import { cn as f } from "./index.es85.js";
import e, { useState as v } from "react";
import { AvatarDemo as g } from "./index.es6.js";
import { CreditSheet as _ } from "./index.es103.js";
const S = ({ name: l = "", email: t = "" }) => {
  if (!(l || t)) return null;
  const r = "text-ellipsis overflow-hidden";
  return /* @__PURE__ */ e.createElement("div", { className: "flex flex-col px-2" }, l && /* @__PURE__ */ e.createElement(
    s,
    {
      variant: "body4",
      className: f("text-light-1", r)
    },
    l
  ), t && /* @__PURE__ */ e.createElement(
    s,
    {
      variant: "body5",
      className: f("text-light-3", r)
    },
    t
  ));
}, I = ({
  alt: l,
  className: t,
  src: r,
  tooltipText: a,
  wrapper: i = null,
  onClick: n
}) => {
  const m = (c) => i?.(c) ?? c, o = /* @__PURE__ */ e.createElement(
    "div",
    {
      className: f("flex gap-4 py-2 cursor-pointer", t),
      ...n && { onClick: n }
    },
    /* @__PURE__ */ e.createElement("img", { src: r, alt: l, height: 25, width: 25 }),
    /* @__PURE__ */ e.createElement(s, { variant: "body2", className: "text-white" }, a)
  );
  return m(o);
}, A = ({
  src: l,
  popoverOptions: t,
  name: r = "",
  email: a = ""
}) => /* @__PURE__ */ e.createElement(
  C,
  {
    dropdownContentProps: { side: "bottom", align: "end", sideOffset: 24 },
    trigger: /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
      g,
      {
        imageSrc: l ?? "",
        size: "md",
        alt: "avatar",
        fallback: /* @__PURE__ */ e.createElement(
          "img",
          {
            src: "https://frontend-static-files.geoiq.io/strapi/Avatar_e5ab891e67.svg",
            alt: "avatar",
            className: "w-10 h-10 cursor-pointer"
          }
        )
      }
    )),
    header: /* @__PURE__ */ e.createElement(S, { name: r, email: a }),
    optionGroups: t
  }
), x = ({ src: l, alt: t }) => /* @__PURE__ */ e.createElement("img", { src: l, alt: t, className: "h-10" }), q = ({
  icons: l = [],
  profile: t,
  credits: r,
  logoutPanel: a,
  logo: i,
  handleClose: n,
  onCreditsClick: m
}) => /* @__PURE__ */ e.createElement("div", { className: "absolute top-0 bottom-0 left-0 right-0 z-10 flex flex-col justify-between bg-dark-2" }, /* @__PURE__ */ e.createElement("div", { className: "flex items-center justify-between w-full px-3 py-2 bg-dark-2" }, /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ e.createElement(x, { ...i }), /* @__PURE__ */ e.createElement(s, { variant: "h2", className: "text-white" }, i?.text ?? "")), /* @__PURE__ */ e.createElement("div", { className: "grid w-10 h-10 place-items-center" }, /* @__PURE__ */ e.createElement(
  "img",
  {
    src: "https://frontend-static-files.geoiq.io/strapi/x_7520d97d3c.svg",
    alt: "close",
    height: 24,
    width: 24,
    className: "cursor-pointer",
    onClick: n
  }
))), /* @__PURE__ */ e.createElement("div", { className: "flex justify-between items-center px-5 py-2 bg-[#212121] flex-shrink-0" }, /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-2 overflow-hidden basis-4/5" }, /* @__PURE__ */ e.createElement(
  g,
  {
    imageSrc: t?.src ?? "",
    size: "md",
    alt: "avatar",
    fallback: /* @__PURE__ */ e.createElement(
      "img",
      {
        src: "https://frontend-static-files.geoiq.io/strapi/Avatar_e5ab891e67.svg",
        alt: "avatar",
        className: "w-12 h-12"
      }
    )
  }
), /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-[2px] overflow-hidden" }, /* @__PURE__ */ e.createElement(
  s,
  {
    variant: "body3",
    className: "overflow-hidden text-white text-ellipsis text-nowrap",
    title: t?.name ?? ""
  },
  t?.name ?? ""
), /* @__PURE__ */ e.createElement(
  s,
  {
    variant: "body3",
    className: "overflow-hidden text-white text-ellipsis text-nowrap",
    title: t?.email ?? ""
  },
  t?.email ?? ""
))), r >= 0 && /* @__PURE__ */ e.createElement(
  "div",
  {
    className: "flex flex-col items-center gap-1 basis-1/5 cursor-pointer",
    onClick: m
  },
  /* @__PURE__ */ e.createElement("div", { className: "p-1 rounded brand-primary-secondary-gradient" }, /* @__PURE__ */ e.createElement(
    "img",
    {
      src: "https://frontend-static-files.geoiq.io/strapi/navbar_credits_247858e26a.svg",
      alt: "coin icon",
      className: "w-4 h-4"
    }
  )),
  /* @__PURE__ */ e.createElement(
    s,
    {
      variant: "body5",
      className: "text-center text-white basis-1/5"
    },
    `${r} credits`
  )
)), /* @__PURE__ */ e.createElement("div", { className: "flex flex-col flex-grow w-full gap-3 px-6 py-4 overflow-auto" }, (l ?? []).map((o, c) => /* @__PURE__ */ e.createElement(I, { key: c, ...o }))), /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-4 pb-4" }, /* @__PURE__ */ e.createElement(b, null), /* @__PURE__ */ e.createElement(
  "div",
  {
    className: "flex items-center w-full gap-4 px-6 cursor-pointer",
    onClick: a.handleLogout
  },
  /* @__PURE__ */ e.createElement(
    "img",
    {
      src: "https://frontend-static-files.geoiq.io/strapi/log_out_e3fa361fb6.svg",
      alt: "logout icon",
      height: 24,
      width: 24
    }
  ),
  /* @__PURE__ */ e.createElement(s, { className: "text-white", variant: "body2" }, "Log out")
), /* @__PURE__ */ e.createElement(b, null), a?.bottomItems?.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "flex items-center justify-center w-full gap-6 px-6" }, a?.bottomItems?.[0]?.label && /* @__PURE__ */ e.createElement(
  s,
  {
    variant: "body3",
    className: "text-white cursor-pointer nowrap",
    onClick: a?.bottomItems[0].onClick
  },
  a.bottomItems[0].label
), a?.bottomItems?.length === 2 && /* @__PURE__ */ e.createElement("div", { className: "w-1 h-1 mx-1 bg-white rounded-full bg-text4 shrink-0 grow-0" }), a?.bottomItems?.[1]?.label && /* @__PURE__ */ e.createElement(
  s,
  {
    variant: "body3",
    className: "text-white cursor-pointer nowrap",
    onClick: a?.bottomItems[1].onClick
  },
  a.bottomItems[1].label
)))), b = () => /* @__PURE__ */ e.createElement("div", { className: "h-[1px] w-full bg-gray-300" }), D = ({
  icons: l,
  credits: t = -1,
  totalCredits: r = null,
  profile: a,
  logo: i,
  clickDisable: n = !1,
  logoutPanel: m,
  id: o,
  onRequestCredits: c,
  onProceedToPayment: E,
  containerId: w,
  buyCreditsOptions: u,
  minimumCreditsToBuy: N
}) => {
  const [p, d] = v(!1), [y, h] = v(!1), k = () => {
    h(!0), d(!1);
  };
  return p ? /* @__PURE__ */ e.createElement("div", { className: "absolute top-0 bottom-0 z-10 w-full" }, /* @__PURE__ */ e.createElement(
    q,
    {
      logo: i,
      icons: l,
      profile: a,
      credits: t,
      logoutPanel: m,
      handleClose: () => d(!1),
      onCreditsClick: k
    }
  )) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "relative z-10 w-full max-h-full", id: o }, /* @__PURE__ */ e.createElement("div", { className: "relative z-0 flex justify-between w-full px-3 py-2 bg-dark-2 h-14" }, p === !1 && /* @__PURE__ */ e.createElement(
    "div",
    {
      className: "grid w-10 h-10 cursor-pointer place-items-center",
      onClick: () => d(!0)
    },
    /* @__PURE__ */ e.createElement(
      "img",
      {
        src: "https://frontend-static-files.geoiq.io/strapi/navbar_menu_33acae53c5.svg",
        alt: "",
        height: 20,
        width: 20
      }
    )
  ), /* @__PURE__ */ e.createElement(x, { ...i }), /* @__PURE__ */ e.createElement(A, { ...a }))), !n && /* @__PURE__ */ e.createElement(
    _,
    {
      open: y,
      onClose: () => h(!1),
      credit_details: r ? `Available: ${t}/${r}` : `Available: ${t}`,
      onRequestCredits: c,
      onProceedToPayment: E,
      containerId: w,
      buyCreditsOptions: u,
      minimumCreditsToBuy: N,
      className: "bg-light-1 fixed left-0 inset-y-0 h-full w-screen border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
      dialogClassName: "hidden"
    }
  ));
};
export {
  D as NavbarMobile
};
//# sourceMappingURL=index.es44.js.map