geoiq-frontend-ui-kit/dist/index.es41.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.es17.js";
import { Dropdown as h } from "./index.es20.js";
import { cn as o } from "./index.es79.js";
import e from "react";
import { AvatarDemo as p } from "./index.es4.js";
const x = ({ 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: o("text-light-1", r)
    },
    l
  ), t && /* @__PURE__ */ e.createElement(
    s,
    {
      variant: "body5",
      className: o("text-light-3", r)
    },
    t
  ));
}, b = ({
  alt: l,
  className: t,
  src: r,
  tooltipText: a,
  wrapper: c = null,
  onClick: i
}) => {
  const n = (d) => c?.(d) ?? d, m = /* @__PURE__ */ e.createElement(
    "div",
    {
      className: o("flex gap-4 py-2 cursor-pointer", t),
      ...i && { onClick: i }
    },
    /* @__PURE__ */ e.createElement("img", { src: r, alt: l, height: 25, width: 25 }),
    /* @__PURE__ */ e.createElement(s, { variant: "body2", className: "text-white" }, a)
  );
  return n(m);
}, g = ({
  src: l,
  popoverOptions: t,
  name: r = "",
  email: a = ""
}) => /* @__PURE__ */ e.createElement(
  h,
  {
    dropdownContentProps: { side: "bottom", align: "end", sideOffset: 24 },
    trigger: (
      // div required as unable to open up the popup without it
      /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
        p,
        {
          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(x, { name: r, email: a }),
    optionGroups: t
  }
), v = ({ src: l, alt: t }) => /* @__PURE__ */ e.createElement("img", { src: l, alt: t, className: "h-10" }), E = ({
  icons: l = [],
  profile: t,
  credits: r,
  logoutPanel: a,
  logo: c,
  handleClose: i
}) => /* @__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(v, { ...c }), /* @__PURE__ */ e.createElement(s, { variant: "h2", className: "text-white" }, c?.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: i
  }
))), /* @__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(
  p,
  {
    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" }, /* @__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((n, m) => /* @__PURE__ */ e.createElement(b, { key: m, ...n }))), /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-4 pb-4" }, /* @__PURE__ */ e.createElement(f, 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(f, 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
)))), f = () => /* @__PURE__ */ e.createElement("div", { className: "h-[1px] w-full bg-gray-300" }), _ = ({
  // login,
  icons: l,
  credits: t = -1,
  profile: r,
  logo: a,
  logoutPanel: c,
  id: i
}) => {
  const [n, m] = e.useState(!1);
  return n ? /* @__PURE__ */ e.createElement("div", { className: "absolute top-0 bottom-0 z-10 w-full" }, /* @__PURE__ */ e.createElement(
    E,
    {
      logo: a,
      icons: l,
      profile: r,
      credits: t,
      logoutPanel: c,
      handleClose: () => m(!1)
    }
  )) : /* @__PURE__ */ e.createElement("div", { className: "relative z-10 w-full max-h-full", id: i }, /* @__PURE__ */ e.createElement("div", { className: "relative z-0 flex justify-between w-full px-3 py-2 bg-dark-2 h-14" }, n === !1 && /* @__PURE__ */ e.createElement(
    "div",
    {
      className: "grid w-10 h-10 cursor-pointer place-items-center",
      onClick: () => m(!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(v, { ...a }), /* @__PURE__ */ e.createElement(g, { ...r })));
};
export {
  _ as NavbarMobile
};
//# sourceMappingURL=index.es41.js.map