@ichaingo/header 1.1.0

package/README.md

@@ -0,0 +1,7 @@
+# @ichaingo/header
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @ichaingo/header` to execute the unit tests via [Vitest](https://vitest.dev/).

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import { default as default_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
+
+export declare function emitUserEvent(eventName: string, data?: any): void;
+
+declare function HeaderBar({ extra, children, className, hideNews, hideLogin }: HeaderBarProps): JSX.Element;
+export default HeaderBar;
+
+export declare interface HeaderBarProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    extra?: default_2.ReactNode;
+    children?: default_2.ReactNode;
+    hideNews?: boolean;
+    hideLogin?: boolean;
+}
+
+export declare function onUserEvent(eventName: string, callback: (data?: any) => void): () => void;
+
+export declare const USER_EVENTS: {
+    readonly PROFILE_UPDATED: "user-profile-updated";
+    readonly LOGGED_IN: "user-logged-in";
+    readonly LOGGED_OUT: "user-logged-out";
+};
+
+export { }

package/dist/index.js

@@ -0,0 +1,382 @@
+'use client';
+import { jsx as e, jsxs as s, Fragment as A } from "react/jsx-runtime";
+import p from "@ichaingo/link";
+import { DropdownMenu as X, DropdownMenuTrigger as G, DropdownMenuContent as M, DropdownMenuGroup as K, DropdownMenuItem as F } from "@ichaingo/ui/dropdown-menu";
+import u from "@ichaingo/translation";
+import { useState as N, useMemo as W, useEffect as w, useCallback as U } from "react";
+import _ from "@ichaingo/betterLink";
+import { useLocale as y, useTranslations as E } from "next-intl";
+import { useTheme as f } from "next-themes";
+import L from "@ichaingo/avatar";
+import { logout as q, fetchUserProfile as Q } from "@ichaingo/auth";
+import { twMerge as d } from "tailwind-merge";
+import { Accordion as P, AccordionItem as R, AccordionTrigger as j, AccordionContent as B } from "@ichaingo/ui/accordion";
+import S from "@ichaingo/image";
+import { Popover as V, PopoverTrigger as J, PopoverContent as Y } from "@ichaingo/ui/popover";
+import { PopoverArrow as Z } from "@radix-ui/react-popover";
+import { useSearchParams as I, usePathname as H } from "next/navigation";
+import ee from "@ichaingo/theme-toggle";
+import te from "rc-drawer";
+import { Menu as re, X as le } from "lucide-react";
+function ne({
+  userInfo: r
+}) {
+  const { gotoLogin: t } = _(), [l, n] = N(""), a = y(), { resolvedTheme: o } = f(), i = W(() => r == null ? void 0 : r.id, [r]);
+  return w(() => {
+    n(t({
+      locale: a,
+      theme: o || "",
+      redirect: window.location.href
+    }));
+  }, [a, o, t]), i ? (
+    // userInfo?.profileUrl
+    // https://images.ichaingo.com/user-profile/100000201.png
+    /* @__PURE__ */ e(L, { userInfo: r, className: "w-8 h-8" })
+  ) : /* @__PURE__ */ e(
+    p,
+    {
+      href: l,
+      className: "cursor-pointer text-sm text-white bg-primary py-2 px-3 rounded-lg",
+      replace: !0,
+      children: /* @__PURE__ */ e(u, { value: "signIn", parentKey: "account" })
+    }
+  );
+}
+function D({ className: r }) {
+  const t = U(async () => {
+    await q();
+  }, []);
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      onClick: t,
+      className: d("cursor-pointer relative", r),
+      children: /* @__PURE__ */ e(u, { value: "logout", parentKey: "account" })
+    }
+  );
+}
+function ae({
+  list: r,
+  userInfo: t,
+  onClick: l
+}) {
+  const { resolvedTheme: n } = f();
+  return /* @__PURE__ */ s(X, { children: [
+    /* @__PURE__ */ e(G, { className: "outline-none cursor-pointer", children: /* @__PURE__ */ e(ne, { userInfo: t }) }),
+    /* @__PURE__ */ e(M, { align: "end", className: "z-2000 w-75 p-0  border-transparent outline-none border border-stroke", children: /* @__PURE__ */ s(K, { className: "flex flex-col gap-2 p-3 bg-module rounded-md", children: [
+      /* @__PURE__ */ e("div", { className: "flex flex-col gap-3 w-full bg-background rounded-lg p-2", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(L, { userInfo: t, className: "w-8 h-8" }),
+        /* @__PURE__ */ s("div", { className: "flex flex-col overflow-hidden", children: [
+          /* @__PURE__ */ e("div", { className: "text-sm font-medium", children: (t == null ? void 0 : t.username) || "--" }),
+          /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground w-full truncate", children: (t == null ? void 0 : t.email) || (t == null ? void 0 : t.walletAddress) })
+        ] })
+      ] }) }),
+      r.map((a) => /* @__PURE__ */ e(F, { className: "px-0 py-0 focus-visible:border-none focus-visible:outline-none", children: /* @__PURE__ */ e("div", { className: "flex items-center gap-2 w-full", children: a.name === "logout" ? /* @__PURE__ */ e(D, { className: "flex-1 flex py-3 border-t border-stroke w-full px-2 hover:bg-background" }) : /* @__PURE__ */ e(p, { href: `/${a.href}?theme=${n}`, baseUrl: process.env.NEXT_PUBLIC_AUTH_URL, className: "flex-1 flex py-3 h-full w-full px-2 hover:bg-background rounded-lg ", onClick: l, children: /* @__PURE__ */ e(u, { value: a.name, parentKey: "account" }) }) }) }, a.name))
+    ] }) })
+  ] });
+}
+function se({
+  list: r,
+  userInfo: t,
+  onClick: l
+}) {
+  const { resolvedTheme: n } = f();
+  return /* @__PURE__ */ e(
+    P,
+    {
+      type: "single",
+      collapsible: !0,
+      className: "w-full",
+      defaultValue: "",
+      children: /* @__PURE__ */ s(R, { value: "item-1", className: "p-0 w-full border border-none", children: [
+        /* @__PURE__ */ e(j, { className: "w-full bg-background p-3 flex items-center justify-between", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-3 w-full overflow-hidden", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e(L, { userInfo: t, className: "w-8 h-8 shrink-0" }),
+          /* @__PURE__ */ s("div", { className: "flex flex-col overflow-hidden", children: [
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium", children: t == null ? void 0 : t.username }),
+            /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground w-full truncate", children: (t == null ? void 0 : t.email) || (t == null ? void 0 : t.walletAddress) })
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ e(B, { className: "flex text-sm flex-col text-balance bg-background rounded-lg p-3 gap-3 mt-[10px]", children: /* @__PURE__ */ e("dl", { children: r.map((a) => /* @__PURE__ */ e(
+          "dd",
+          {
+            className: "flex justify-start items-center gap-2 py-2",
+            children: /* @__PURE__ */ e(p, { href: `/${a.href}?theme=${n}`, className: "flex-1 py-2", onClick: l, suppressHydrationWarning: !0, baseUrl: process.env.NEXT_PUBLIC_AUTH_URL, children: /* @__PURE__ */ e(u, { value: a.name, parentKey: "account" }) })
+          },
+          a.name
+        )) }) })
+      ] })
+    }
+  );
+}
+function $({ onClick: r = () => {
+}, className: t }) {
+  const l = y(), { resolvedTheme: n, theme: a } = f(), { gotoLogin: o } = _(), [i, m] = N("");
+  return w(() => {
+    m(o({
+      locale: l,
+      theme: n || a || "",
+      redirect: window.location.href
+    }));
+  }, [l, n, a, o]), /* @__PURE__ */ e(
+    p,
+    {
+      href: i,
+      onClick: r,
+      baseUrl: process.env.NEXT_PUBLIC_AUTH_URL,
+      replace: !0,
+      className: d(
+        "cursor-pointer text-sm text-white bg-primary py-2 px-3 rounded-lg",
+        t
+      ),
+      children: /* @__PURE__ */ e(u, { value: "signIn", parentKey: "account" })
+    }
+  );
+}
+const k = [
+  {
+    name: "overview",
+    href: "user-center"
+  },
+  {
+    name: "collect",
+    href: "user-center/collect"
+  },
+  {
+    name: "setting",
+    href: "user-center/setting"
+  },
+  {
+    name: "logout",
+    href: void 0
+  }
+];
+function oe({ onClick: r = (n) => {
+}, className: t, userInfo: l }) {
+  return l != null && l.id ? /* @__PURE__ */ s(A, { children: [
+    /* @__PURE__ */ e("div", { className: d("hidden md:flex items-center", t), children: /* @__PURE__ */ e(ae, { list: k, userInfo: l, onClick: r }) }),
+    /* @__PURE__ */ e("div", { className: d("block md:hidden w-full", t), children: /* @__PURE__ */ e(se, { list: k.filter((n) => n.href), userInfo: l, onClick: r }) })
+  ] }) : /* @__PURE__ */ e($, { onClick: r, className: d(
+    "hidden md:flex cursor-pointer text-sm text-white bg-primary py-2 px-3 rounded-lg",
+    "order-3"
+  ) });
+}
+function T({ onClick: r = () => {
+} }) {
+  var g;
+  const t = y(), l = I(), n = E("lang"), a = E("setting"), o = [
+    { name: n("en"), lang: "en" },
+    { name: n("zh-hant"), lang: "zh-hant" },
+    { name: n("zh-hans"), lang: "zh-hans" },
+    { name: n("ja"), lang: "ja" },
+    { name: n("ko"), lang: "ko" }
+  ], i = H(), m = U(
+    (c) => {
+      const v = i.replace(new RegExp(`/${t}(/|$)`), `/${c}$1`), b = l.toString();
+      return b ? `${v}?${b}` : v;
+    },
+    [i, t, l]
+  );
+  return /* @__PURE__ */ s("div", { className: "text-sm gap-2 flex flex-col justify-start items-start md:py-2", children: [
+    /* @__PURE__ */ e("div", { className: "flex w-full justify-between items-center", children: /* @__PURE__ */ e(P, { type: "single", className: "flex-1", collapsible: !0, children: /* @__PURE__ */ s(R, { value: t, className: "border-0", children: [
+      /* @__PURE__ */ e(j, { className: "p-2 bg-background rounded-lg h-11 md:h-auto text-gray-500 w-full flex py-2 justify-between items-center hover:no-underline focus-visible:ring-0 focus-visible:ring-offset-0", children: /* @__PURE__ */ s("div", { className: "flex w-full justify-between items-center", children: [
+        /* @__PURE__ */ e("span", { className: "text-title", children: a("language") }),
+        /* @__PURE__ */ e("span", { className: "text-title", children: (g = o.find((c) => c.lang === t)) == null ? void 0 : g.name })
+      ] }) }),
+      /* @__PURE__ */ e(B, { className: "bg-background mt-3 rounded-lg flex flex-col gap-2", children: o.map((c) => /* @__PURE__ */ e(
+        p,
+        {
+          prefetch: !1,
+          withLocale: !1,
+          className: d(
+            "p-2 rounded-lg flex w-full justify-between items-center",
+            t === c.lang ? "text-primary" : ""
+          ),
+          href: m(c.lang),
+          onClick: r,
+          children: c.name
+        },
+        c.lang
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ s("div", { className: "bg-background p-2 rounded-lg h-11 md:h-auto flex w-full justify-between items-center", children: [
+      /* @__PURE__ */ e("div", { children: a("theme") }),
+      /* @__PURE__ */ e(ee, {})
+    ] })
+  ] });
+}
+function ie({ onClick: r = () => {
+} }) {
+  return /* @__PURE__ */ s("div", { className: "w-full md:w-auto order-3 md:order-0", children: [
+    /* @__PURE__ */ e("div", { className: "hidden md:flex items-center bg-module rounded-lg p-1.5 cursor-pointer", children: /* @__PURE__ */ s(V, { children: [
+      /* @__PURE__ */ e(J, { asChild: !0, children: /* @__PURE__ */ e(S, { src: `${process.env.NEXT_PUBLIC_CDN_URL}/common/user/5c4a8103-f01c-488a-9d5e-7ef5e442353e.png`, width: 24, height: 24 }) }),
+      /* @__PURE__ */ s(
+        Y,
+        {
+          side: "bottom",
+          className: "relative top-[10px] rounded-xl border border-stroke bg-module p-2 w-72 z-1000",
+          children: [
+            /* @__PURE__ */ e(Z, { className: "fill-module" }),
+            /* @__PURE__ */ e(T, { onClick: r })
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e("div", { className: "md:hidden", children: /* @__PURE__ */ e(T, {}) })
+  ] });
+}
+const C = {
+  PROFILE_UPDATED: "user-profile-updated",
+  LOGGED_IN: "user-logged-in",
+  LOGGED_OUT: "user-logged-out"
+};
+function je(r, t) {
+  const l = new CustomEvent(r, { detail: t });
+  window.dispatchEvent(l);
+}
+function ce(r, t) {
+  const l = (n) => {
+    t(n.detail);
+  };
+  return window.addEventListener(r, l), () => window.removeEventListener(r, l);
+}
+function de(r, t) {
+  window.removeEventListener(r, t);
+}
+function z({ onClick: r = () => {
+}, hideNews: t = !1, hideLogin: l = !1 }) {
+  const { gotoAISQL: n, gotoChat: a } = _(), o = y(), { resolvedTheme: i, theme: m } = f(), g = H(), [c, v] = N(null), b = [
+    {
+      baseUrl: process.env.NEXT_PUBLIC_ICHAINGO_SEARCH_BASEURL,
+      href: `/explorer?theme=${i || m}`,
+      key: "/explorer",
+      label: /* @__PURE__ */ e("span", { className: "whitespace-nowrap leading-11 md:leading-[34px]", children: /* @__PURE__ */ e(u, { value: "title", parentKey: "browser" }) })
+    },
+    {
+      baseUrl: process.env.NEXT_PUBLIC_CHAT_URL,
+      href: a({
+        theme: i || m,
+        locale: o
+      }),
+      key: "/chat",
+      label: /* @__PURE__ */ s("span", { className: "whitespace-nowrap leading-11 md:leading-[34px]", children: [
+        /* @__PURE__ */ e("span", { role: "img", "aria-label": "hot", children: "🔥" }),
+        /* @__PURE__ */ e("span", { children: "iGoChat" })
+      ] })
+    },
+    {
+      baseUrl: process.env.NEXT_PUBLIC_CHAT_URL,
+      href: n({
+        theme: i || m,
+        locale: o
+      }),
+      key: "/sql",
+      label: "AISQL"
+    },
+    {
+      baseUrl: process.env.NEXT_PUBLIC_ICHAINGO_SEARCH_BASEURL,
+      href: `/etf/btc-us?theme=${i || m}`,
+      key: "/etf",
+      label: /* @__PURE__ */ e(u, { value: "etf", parentKey: "menu" })
+    },
+    {
+      baseUrl: process.env.NEXT_PUBLIC_ICHAINGO_SEARCH_BASEURL,
+      href: `/news?theme=${i || m}`,
+      key: "/news",
+      label: /* @__PURE__ */ e(u, { value: "news", parentKey: "menu" })
+    },
+    {
+      baseUrl: process.env.NEXT_PUBLIC_ICHAINGO_SEARCH_BASEURL,
+      href: `/market?theme=${i || m}`,
+      key: "/market",
+      label: /* @__PURE__ */ e(u, { value: "market", parentKey: "menu" })
+    }
+  ].filter((h) => t ? !["/explorer", "/chat", "/sql"].includes(h.key) : !0), x = U(() => {
+    Q().then((h) => {
+      v(h);
+    });
+  }, []);
+  return w(() => {
+    x();
+  }, [x]), w(() => (ce(C.PROFILE_UPDATED, x), () => {
+    de(C.PROFILE_UPDATED, x);
+  }), [x]), /* @__PURE__ */ s(
+    "nav",
+    {
+      className: d(
+        "flex flex-col justify-start items-start md:px-3",
+        "md:flex-row md:justify-end md:items-start  md:px-0",
+        "md:gap-6"
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          "ul",
+          {
+            className: d(
+              "flex flex-col justify-start items-start w-full  h-full text-sm leading-[44px]  z-1001 text-title",
+              "md:flex-row md:items-center md:w-auto md:h-[34px] md:leading-[34px] md:gap-6",
+              "order-2 md:order-0"
+            ),
+            children: b.map((h, O) => /* @__PURE__ */ e("li", { className: d("w-full md:w-auto h-11 md:h-auto cursor-pointer", g.includes(h.key) && "border-b-2 border-primary text-primary "), children: /* @__PURE__ */ e(p, { href: h.href, onClick: r, className: "h-full flex items-center justify-start", baseUrl: h.baseUrl, suppressHydrationWarning: !0, children: h.label }) }, O))
+          }
+        ),
+        /* @__PURE__ */ e(ie, { onClick: r }),
+        !g.includes("/login") && !l ? /* @__PURE__ */ s(A, { children: [
+          /* @__PURE__ */ e(oe, { onClick: r, userInfo: c }),
+          c != null && c.id ? /* @__PURE__ */ e("div", { className: "flex md:hidden h-11 md:h-auto  cursor-pointer whitespace-nowrap order-3 bg-background rounded-lg p-2 mt-3 w-full items-center justify-center text-subtitle", children: /* @__PURE__ */ e(D, {}) }) : /* @__PURE__ */ e($, { onClick: r, className: "flex md:hidden h-11  cursor-pointer whitespace-nowrap order-3 bg-primary text-[#fff] rounded-lg p-2 mt-3 w-full items-center justify-center" })
+        ] }) : null
+      ]
+    }
+  );
+}
+function me({ hideLogin: r, hideNews: t }) {
+  const [l, n] = N(!1);
+  if (!l)
+    return /* @__PURE__ */ e(re, { onClick: () => n(!0), size: 32, style: { color: "var(--title)" }, className: "md:hidden ml-2.5 bg-module rounded-lg p-[4px] " });
+  const a = (o) => {
+    o == null || o.preventDefault(), o == null || o.stopPropagation(), n(!1);
+  };
+  return /* @__PURE__ */ e(te, { open: l, placement: "right", className: "block md:hidden fixed top-0 bottom-0 left-0 right-0 z-1001 bg-background p-2", children: /* @__PURE__ */ s("div", { className: "w-full max-h-full overflow-y-auto p-3 bg-module rounded-lg", children: [
+    /* @__PURE__ */ e("div", { className: "flex justify-end items-center p-2", children: /* @__PURE__ */ e(le, { size: 24, style: { color: "var(--title)" }, onClick: (o) => a(o) }) }),
+    /* @__PURE__ */ e(z, { onClick: (o) => a(o), hideLogin: r, hideNews: t })
+  ] }) });
+}
+function ue({ hideNews: r, hideLogin: t }) {
+  return /* @__PURE__ */ s("div", { className: "flex justify-end items-center md:gap-10 z-1001 ", children: [
+    /* @__PURE__ */ e(me, { hideLogin: t, hideNews: r }),
+    /* @__PURE__ */ e("div", { className: "hidden md:block", children: /* @__PURE__ */ e(z, { hideNews: r, hideLogin: t }) })
+  ] });
+}
+function he() {
+  const { resolvedTheme: r, theme: t } = f();
+  return /* @__PURE__ */ e(p, { suppressHydrationWarning: !0, href: `/?theme=${r || t}`, baseUrl: process.env.NEXT_PUBLIC_ICHAINGO_SEARCH_BASEURL, className: d(
+    "w-auto shrink-0 block"
+  ), children: /* @__PURE__ */ e(
+    S,
+    {
+      src: "https://cdn.ichaingo.com/uploads/logo_20250526_9aa337bef7.png",
+      width: 116,
+      height: 32,
+      alt: "logo",
+      objectFit: "contain",
+      priority: !0
+    }
+  ) });
+}
+function Be({ extra: r, children: t, className: l, hideNews: n, hideLogin: a }) {
+  return /* @__PURE__ */ s("div", { className: d("sticky left-0 right-0 top-0 bg-background h-16 z-999", l), children: [
+    /* @__PURE__ */ s("div", { className: "md:bg-module h-13 text-center flex flex-wrap justify-between items-center gap-2 px-4", children: [
+      /* @__PURE__ */ s("div", { className: "flex items-center flex-1 gap-6", children: [
+        /* @__PURE__ */ e(he, {}),
+        t
+      ] }),
+      /* @__PURE__ */ e(ue, { hideNews: n, hideLogin: a })
+    ] }),
+    r
+  ] });
+}
+export {
+  C as USER_EVENTS,
+  Be as default,
+  je as emitUserEvent,
+  ce as onUserEvent
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@ichaingo/header",
+  "version": "1.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "dependencies": {
+    "@radix-ui/react-popover": "^1.1.4",
+    "js-cookie": "^3.0.5",
+    "lucide-react": "^0.539.0",
+    "next-intl": "^4.3.4",
+    "next-themes": "^0.4.4",
+    "rc-drawer": "^1.0.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rollup-plugin-preserve-use-client": "^1.0.0",
+    "tailwind-merge": "^2.5.5",
+    "next": "15.1.6",
+    "@ichaingo/avatar": "1.1.0",
+    "@ichaingo/betterLink": "npm:@ichaingo/better-link@1.1.0",
+    "@ichaingo/link": "1.1.0",
+    "@ichaingo/image": "1.1.0",
+    "@ichaingo/auth": "1.1.0",
+    "@ichaingo/ui": "1.1.0",
+    "@ichaingo/translation": "1.1.0",
+    "@ichaingo/i18n": "1.1.0",
+    "@ichaingo/providers": "1.1.0",
+    "@ichaingo/theme-toggle": "1.1.0"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.6"
+  }
+}