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

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

import { Badge as g } from "./index.es6.js";
import v from "./index.es16.js";
import { Typography as o } from "./index.es17.js";
import { Dropdown as x } from "./index.es20.js";
import { cn as m } from "./index.es79.js";
import e from "react";
import { NavbarIconVariants as u } from "./index.es117.js";
import { AvatarDemo as h } from "./index.es4.js";
const N = ({ 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(
    o,
    {
      variant: "body4",
      className: m("text-light-1", r)
    },
    t
  ), a && /* @__PURE__ */ e.createElement(
    o,
    {
      variant: "body5",
      className: m("text-light-3", r)
    },
    a
  ));
}, s = ({
  alt: t,
  className: a,
  isActive: r = !1,
  isNew: l = !1,
  src: d,
  tooltipText: n = "",
  wrapper: f = null,
  onClick: c
}) => {
  const i = (E) => f?.(E) ?? E, p = /* @__PURE__ */ e.createElement(
    "div",
    {
      className: m(u({ isActive: r }), a),
      ...c && { onClick: c }
    },
    /* @__PURE__ */ e.createElement("img", { src: d, alt: t }),
    /* @__PURE__ */ e.createElement(y, { isNew: l })
  );
  return i(
    n ? /* @__PURE__ */ e.createElement("div", { className: "relative" }, /* @__PURE__ */ e.createElement(
      v,
      {
        content: "",
        headerText: /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-2" }, l && /* @__PURE__ */ e.createElement(g, { variant: "gradient", size: "sm" }, "NEW"), /* @__PURE__ */ e.createElement("div", null, n)),
        sideOffset: 24,
        triggerElement: p,
        delayDuration: 100,
        side: "right"
      }
    )) : p
  );
}, b = () => /* @__PURE__ */ e.createElement("div", { className: "my-1 h-[1px] w-10 bg-white opacity-20" }), y = ({ isNew: t }) => t ? /* @__PURE__ */ e.createElement("div", { className: "absolute w-[6px] h-[6px] rounded-full bottom-1 right-1 bg-secondary-2" }) : null, w = ({
  src: t,
  popoverOptions: a,
  name: r = "",
  email: l = ""
}) => /* @__PURE__ */ e.createElement(
  x,
  {
    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(
        h,
        {
          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(N, { name: r, email: l }),
    optionGroups: a
  }
), _ = ({
  onClick: t
}) => /* @__PURE__ */ e.createElement(
  o,
  {
    variant: "body4",
    className: "text-center text-white cursor-pointer",
    onClick: t
  },
  "Login"
), k = ({ src: t, alt: a }) => /* @__PURE__ */ e.createElement("img", { src: t, alt: a, className: "w-10 h-auto" }), D = ({ credits: t }) => 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" }, 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(o, { 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"
  }
)), B = ({
  login: t,
  icons: a,
  credits: r = -1,
  profile: l,
  logo: d,
  className: n = "",
  id: f
}) => /* @__PURE__ */ e.createElement(
  "div",
  {
    className: m(
      "w-16 bg-dark-2 px-3 py-4 h-full flex flex-col justify-between",
      n
    ),
    id: f
  },
  /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-8" }, /* @__PURE__ */ e.createElement(k, { ...d }), /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-3" }, (a?.list ?? []).map((c, i) => /* @__PURE__ */ e.createElement(s, { key: i, ...c })))),
  /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-2" }, a.chat && /* @__PURE__ */ e.createElement(s, { ...a.chat }), a.notification && /* @__PURE__ */ e.createElement(s, { ...a.notification }), /* @__PURE__ */ e.createElement(s, { ...a.help }), /* @__PURE__ */ e.createElement(D, { credits: r }), /* @__PURE__ */ e.createElement(b, null), t?.isLoggedIn ? /* @__PURE__ */ e.createElement(w, { ...l }) : /* @__PURE__ */ e.createElement(_, { ...t }))
);
export {
  B as NavbarDesktop
};
//# sourceMappingURL=index.es40.js.map