@graphprotocol/go 10.5.2

package/dist/GlobalFooter/GlobalFooter.js

@@ -0,0 +1,300 @@
+"use client";
+import { jsx, jsxs } from "../jsx/src/jsx-runtime.js";
+import { useI18n, Icon, Flex, Text, Input, Spacing, buildTransition, Opacity, BorderRadius, Dropdown, Link, LocaleSwitcher } from "@graphprotocol/gds";
+import { useRef, useState, useId, useEffect, Fragment } from "react";
+const defaultNewsletterConfig = {
+  subscribeUrl: "https://api.thegraph.com/subscribe/",
+  listId: "343e348856a7f969a8bb47627b0e1531"
+};
+function GlobalFooter({
+  baseUrl = process.env.ENVIRONMENT === "staging" ? "https://staging.thegraph.com/" : "https://thegraph.com/",
+  showLogo = false,
+  showNewsletter = false,
+  showLocaleSwitcher = false,
+  className,
+  ...props
+}) {
+  const { t, locale } = useI18n();
+  const newsletterConfig = { ...defaultNewsletterConfig, ...typeof showNewsletter === "object" ? showNewsletter : {} };
+  const newsletterInputRef = useRef(null);
+  const [newsletterEmail, setNewsletterEmail] = useState("");
+  const [newsletterStatus, setNewsletterStatus] = useState("ready");
+  const newsletterInputEnabled = newsletterStatus !== "submitting" && newsletterStatus !== "success";
+  const newsletterSubmitEnabled = newsletterInputEnabled && newsletterEmail.length > 0;
+  const newsletterErrorMessage = {
+    invalid: t("components.globalFooter.newsletterInvalidEmail"),
+    error: t("components.globalFooter.newsletterError")
+  }[newsletterStatus] ?? null;
+  const newsletterErrorId = `newsletter-error-${useId()}`;
+  useEffect(() => {
+    if (typeof window !== "undefined" && window.location.hash.includes("newsletter")) {
+      setTimeout(() => {
+        var _a;
+        return (_a = newsletterInputRef.current) == null ? void 0 : _a.focus();
+      }, 0);
+    }
+  }, []);
+  const submitNewsletter = async () => {
+    var _a;
+    if (!newsletterSubmitEnabled) {
+      return;
+    }
+    if (!((_a = newsletterInputRef.current) == null ? void 0 : _a.validity.valid)) {
+      setNewsletterStatus("invalid");
+      return;
+    }
+    try {
+      setNewsletterStatus("submitting");
+      await fetch(
+        `${newsletterConfig.subscribeUrl}?email=${encodeURIComponent(newsletterEmail)}&list=${encodeURIComponent(
+          newsletterConfig.listId
+        )}`,
+        {
+          method: "GET"
+        }
+      );
+      setNewsletterEmail("");
+      setNewsletterStatus("success");
+      setTimeout(() => setNewsletterStatus("ready"), 5e3);
+    } catch (e) {
+      console.error("Error subscribing", e);
+      setNewsletterStatus("error");
+    }
+  };
+  const getHref = (href) => {
+    if (!baseUrl || !href.startsWith("/") || href.startsWith("//")) {
+      return href;
+    }
+    return `${baseUrl.replace(/\/$/, "")}${href}`;
+  };
+  return /* @__PURE__ */ jsx("div", { className, sx: { py: Spacing["32px"] }, ...props, children: /* @__PURE__ */ jsxs(Flex.Column, { align: "center", gap: Spacing["32px"], children: [
+    showLogo ? /* @__PURE__ */ jsx(Icon.LogoTheGraph, { size: "40px" }) : null,
+    showNewsletter ? /* @__PURE__ */ jsx("div", { sx: { width: "344px", maxWidth: "100%" }, children: newsletterStatus === "success" ? /* @__PURE__ */ jsx(Flex.Center, { role: "status", sx: { height: "64px" }, children: /* @__PURE__ */ jsx(Text, { align: "center", weight: "MEDIUM", size: "16px", color: "Green", children: t("components.globalFooter.newsletterSuccess") }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: newsletterInputRef,
+          type: "email",
+          placeholder: "Subscribe to our newsletter",
+          "aria-label": "Subscribe to our newsletter",
+          disabled: !newsletterInputEnabled,
+          value: newsletterEmail,
+          onChange: (event) => {
+            setNewsletterEmail(event.target.value);
+            setNewsletterStatus("ready");
+          },
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              void submitNewsletter();
+            }
+          },
+          sx: {
+            input: {
+              pr: Spacing["48px"]
+            }
+          },
+          trailingAdornment: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: !newsletterSubmitEnabled,
+              onClick: () => void submitNewsletter(),
+              sx: {
+                width: "32px",
+                height: "32px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    sx: {
+                      position: "absolute",
+                      inset: 0,
+                      borderRadius: BorderRadius.FULL,
+                      backgroundColor: "Purple",
+                      opacity: newsletterSubmitEnabled ? Opacity["100%"] : Opacity["0%"],
+                      transform: "scale(1)",
+                      "button:hover &": {
+                        transform: "scale(1.25)"
+                      },
+                      transition: buildTransition("ALL")
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(Flex.Center, { sx: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+                  Icon.ArrowSpecialRight,
+                  {
+                    title: "Submit",
+                    sx: {
+                      opacity: newsletterSubmitEnabled ? Opacity["100%"] : Opacity["32%"],
+                      transition: buildTransition("OPACITY")
+                    }
+                  }
+                ) })
+              ]
+            }
+          ),
+          "aria-describedby": newsletterErrorMessage ? newsletterErrorId : void 0
+        }
+      ),
+      newsletterErrorMessage ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          id: newsletterErrorId,
+          role: "alert",
+          align: "center",
+          weight: "MEDIUM",
+          size: "16px",
+          color: "Red",
+          sx: { mt: Spacing["8px"] },
+          children: newsletterErrorMessage
+        }
+      ) : null
+    ] }) }) : null,
+    /* @__PURE__ */ jsxs("nav", { children: [
+      /* @__PURE__ */ jsx(Flex.Row, { as: "ul", wrap: true, justify: "center", gapX: Spacing["32px"], gapY: Spacing["16px"], children: [
+        {
+          label: t("components.globalFooter.home"),
+          href: `/${locale}/`
+        },
+        {
+          label: t("components.globalFooter.blog"),
+          href: "/blog/"
+        },
+        /*
+        {
+          label: t('components.globalFooter.jobs'),
+          href: '/jobs/',
+        },
+        */
+        {
+          label: t("components.globalFooter.docs"),
+          href: `/docs/${locale}/`
+        },
+        {
+          label: t("components.globalFooter.pastEvents"),
+          items: [
+            {
+              label: "Graph Day 2022",
+              href: "/graph-day/2022/"
+            },
+            {
+              label: "Graph Hack 2022",
+              href: "/graph-hack/2022/"
+            }
+          ]
+        }
+      ].map(({ label, href, items }, navItemIndex) => /* @__PURE__ */ jsx("li", { children: items ? /* @__PURE__ */ jsxs(Dropdown, { type: "menu", children: [
+        /* @__PURE__ */ jsx(Dropdown.Button, { asChild: true, children: /* @__PURE__ */ jsxs(Link, { size: ["14px", null, "16px"], autoIcon: false, children: [
+          label,
+          /* @__PURE__ */ jsx(Icon.CaretDown, {})
+        ] }) }),
+        /* @__PURE__ */ jsx(Dropdown.Menu, { children: items.map((item, itemIndex) => /* @__PURE__ */ jsx(Dropdown.Menu.Item, { href: getHref(item.href), children: item.label }, itemIndex)) })
+      ] }) : /* @__PURE__ */ jsx(Link, { href: getHref(href), size: ["14px", null, "16px"], autoIcon: false, children: label }) }, navItemIndex)) }),
+      /* @__PURE__ */ jsx(
+        Flex.Row,
+        {
+          as: "ul",
+          wrap: true,
+          justify: "center",
+          gapX: Spacing["24px"],
+          gapY: Spacing["8px"],
+          sx: { mt: Spacing["24px"] },
+          children: [
+            {
+              label: t("components.globalFooter.status"),
+              href: "https://status.thegraph.com/"
+            },
+            {
+              label: t("components.globalFooter.testnet"),
+              href: "https://testnet.thegraph.com/"
+            },
+            {
+              label: t("components.globalFooter.privacyPolicy"),
+              href: "/privacy/"
+            },
+            {
+              label: t("components.globalFooter.termsOfService"),
+              href: "/terms-of-service/"
+            },
+            {
+              label: t("components.globalFooter.brandAssets"),
+              href: "/brand/"
+            },
+            {
+              label: t("components.globalFooter.partnershipRequests"),
+              href: "https://thegraph.typeform.com/to/rhYddDRu",
+              target: "_blank"
+            },
+            {
+              label: t("components.globalFooter.forum"),
+              href: "https://forum.thegraph.com/",
+              target: "_blank"
+            },
+            {
+              label: t("components.globalFooter.security"),
+              href: "https://immunefi.com/bounty/thegraph/",
+              target: "_blank"
+            }
+          ].map(({ label, href, target }, navItemIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link.Secondary, { href: getHref(href), target, size: "14px", autoIcon: target === "_blank", children: label }) }, navItemIndex))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Flex.Row, { as: "ul", wrap: true, justify: "center", gapX: Spacing["32px"], gapY: Spacing["16px"], children: [
+      [
+        {
+          icon: Icon.LogoGitHub,
+          href: "https://github.com/graphprotocol"
+        },
+        {
+          icon: Icon.LogoX,
+          href: "https://x.com/graphprotocol"
+        },
+        {
+          icon: Icon.LogoThreads,
+          href: "https://www.threads.net/@graphprotocol"
+        },
+        {
+          icon: Icon.LogoInstagram,
+          href: "https://www.instagram.com/graphprotocol/"
+        },
+        {
+          icon: Icon.LogoFarcaster,
+          href: "https://farcaster.xyz/graphprotocol"
+        },
+        {
+          icon: Icon.LogoDiscord,
+          href: "https://discord.gg/graphprotocol"
+        },
+        {
+          icon: Icon.LogoTelegram,
+          href: "https://t.me/graphprotocol"
+        },
+        {
+          icon: Icon.LogoReddit,
+          href: "https://www.reddit.com/r/thegraph/"
+        },
+        {
+          icon: Icon.LogoSpotify,
+          href: "https://open.spotify.com/show/2qU70VOmQYQCTMVPOeZ4EU"
+        },
+        {
+          icon: Icon.LogoYouTube,
+          href: "https://www.youtube.com/@GraphProtocol"
+        },
+        {
+          icon: Icon.LogoLinkedIn,
+          href: "https://www.linkedin.com/company/thegraph/"
+        },
+        {
+          icon: Icon.Mail,
+          href: "mailto:info@thegraph.com"
+        }
+      ].map(({ icon: Icon2, href }, navItemIndex) => /* @__PURE__ */ jsx("li", { sx: { display: "flex", alignItems: "center", minHeight: "32px" }, children: /* @__PURE__ */ jsx(Link, { href: getHref(href), target: "_blank", autoIcon: false, children: /* @__PURE__ */ jsx(Icon2, {}) }) }, navItemIndex)),
+      showLocaleSwitcher ? /* @__PURE__ */ jsx(LocaleSwitcher, { sx: { "&:dir(rtl)": { order: -1 } } }) : null
+    ] })
+  ] }) });
+}
+export {
+  GlobalFooter
+};

package/dist/GlobalFooter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './GlobalFooter';
+//# sourceMappingURL=index.d.ts.map

package/dist/GlobalFooter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/GlobalFooter/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}