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

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

import { Badge as N } from "./index.es8.js";
import y from "./index.es18.js";
import { Typography as d } from "./index.es19.js";
import { Dropdown as w } from "./index.es22.js";
import { cn as f } from "./index.es85.js";
import e, { useState as _ } from "react";
import { NavbarIconVariants as S } from "./index.es102.js";
import { AvatarDemo as k } from "./index.es6.js";
import { CreditSheet as A } from "./index.es103.js";
const I = ({ name: t = "", email: a = "" }) => {
  if (!(t || a)) return null;
  const r = "text-ellipsis overflow-hidden";
  return /* @__PURE__ */ e.createElement("div", { className: "flex flex-col px-2" }, t && /* @__PURE__ */ e.createElement(
    d,
    {
      variant: "body4",
      className: f("text-light-1", r)
    },
    t
  ), a && /* @__PURE__ */ e.createElement(
    d,
    {
      variant: "body5",
      className: f("text-light-3", r)
    },
    a
  ));
}, m = ({
  alt: t,
  className: a,
  isActive: r = !1,
  isNew: l = !1,
  src: p,
  tooltipText: n = "",
  wrapper: E = null,
  onClick: i
}) => {
  const c = (s) => E?.(s) ?? s, o = /* @__PURE__ */ e.createElement(
    "div",
    {
      className: f(S({ isActive: r }), a),
      ...i && { onClick: i }
    },
    /* @__PURE__ */ e.createElement("img", { src: p, alt: t }),
    /* @__PURE__ */ e.createElement(C, { isNew: l })
  );
  return c(
    n ? /* @__PURE__ */ e.createElement("div", { className: "relative" }, /* @__PURE__ */ e.createElement(
      y,
      {
        content: "",
        headerText: /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-2" }, l && /* @__PURE__ */ e.createElement(N, { variant: "gradient", size: "sm" }, "NEW"), /* @__PURE__ */ e.createElement("div", null, n)),
        sideOffset: 24,
        triggerElement: o,
        delayDuration: 100,
        side: "right"
      }
    )) : o
  );
}, O = () => /* @__PURE__ */ e.createElement("div", { className: "my-1 h-[1px] w-10 bg-white opacity-20" }), C = ({ isNew: t }) => t ? /* @__PURE__ */ e.createElement("div", { className: "absolute w-[6px] h-[6px] rounded-full bottom-1 right-1 bg-secondary-2" }) : null, D = ({
  src: t,
  popoverOptions: a,
  name: r = "",
  email: l = ""
}) => /* @__PURE__ */ e.createElement(
  w,
  {
    dropdownContentProps: { sideOffset: 24, side: "right", align: "end" },
    trigger: (
      // div required as unable to open up the popup without it
      /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
        k,
        {
          imageSrc: t ?? "",
          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(I, { name: r, email: l }),
    optionGroups: a
  }
), L = ({
  onClick: t
}) => /* @__PURE__ */ e.createElement(
  d,
  {
    variant: "body4",
    className: "text-center text-white cursor-pointer",
    onClick: t
  },
  "Login"
), q = ({ src: t, alt: a }) => /* @__PURE__ */ e.createElement("img", { src: t, alt: a, className: "w-10 h-auto" }), P = ({
  credits: t,
  onClick: a
}) => t >= 0 && /* @__PURE__ */ e.createElement(
  "div",
  {
    className: "rounded brand-primary-secondary-gradient flex gap-[2px] h-auto box-border p-1 w-10 flex-wrap justify-center cursor-pointer",
    onClick: a
  },
  t > 9999 ? /* @__PURE__ */ e.createElement(
    "img",
    {
      src: "https://frontend-static-files.geoiq.io/strapi/infinity_7d62ad2947.svg",
      alt: "infinity icon",
      className: "w-4 h-4"
    }
  ) : /* @__PURE__ */ e.createElement(d, { variant: "body5", className: "text-white" }, t),
  /* @__PURE__ */ e.createElement(
    "img",
    {
      src: "https://frontend-static-files.geoiq.io/strapi/navbar_credits_247858e26a.svg",
      alt: "coin icon",
      className: "w-4 h-4"
    }
  )
), R = ({
  login: t,
  icons: a,
  credits: r = -1,
  totalCredits: l = null,
  profile: p,
  clickDisable: n = !0,
  logo: E,
  className: i = "",
  id: c,
  onRequestCredits: o,
  onProceedToPayment: s,
  buyCreditsOptions: v,
  minimumCreditsToBuy: u
}) => {
  const [h, g] = _(!1);
  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
    "div",
    {
      className: f(
        "w-16 bg-dark-2 px-3 py-4 h-full flex flex-col justify-between",
        i
      ),
      id: c
    },
    /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-8" }, /* @__PURE__ */ e.createElement(q, { ...E }), /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-3" }, (a?.list ?? []).map((x, b) => /* @__PURE__ */ e.createElement(m, { key: b, ...x })))),
    /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-2" }, a.chat && /* @__PURE__ */ e.createElement(m, { ...a.chat }), a.notification && /* @__PURE__ */ e.createElement(m, { ...a.notification }), /* @__PURE__ */ e.createElement(m, { ...a.help }), /* @__PURE__ */ e.createElement(P, { credits: r, onClick: () => g(!0) }), /* @__PURE__ */ e.createElement(O, null), t?.isLoggedIn ? /* @__PURE__ */ e.createElement(D, { ...p }) : /* @__PURE__ */ e.createElement(L, { ...t }))
  ), !n && /* @__PURE__ */ e.createElement(
    A,
    {
      open: h,
      onClose: () => g(!1),
      credit_details: l ? `Available: ${r}/${l}` : `Available: ${r}`,
      onRequestCredits: o,
      onProceedToPayment: s,
      containerId: "navbar-container",
      buyCreditsOptions: v,
      minimumCreditsToBuy: u
    }
  ));
};
export {
  R as NavbarDesktop
};
//# sourceMappingURL=index.es43.js.map