function Links()

in components/header.tsx [50:158]
109 lines of code
2 McCabe index (conditional complexity)

function Links() {
  const [css, theme] = useStyletron();
  const {
    activePage = { key: null },
    figmaLink = "#",
    openHelpModal,
  } = useContext(PageContext);
  return (
    <Fragment>
      <div
        className={css({
          marginLeft: theme.sizing.scale400,
          marginRight: theme.sizing.scale400,
        })}
      >
        <Button
          // @ts-ignore - Missing type in baseui
          $as="a"
          href="https://baseweb.design"
          target="_blank"
          rel="noopener"
          kind={KIND.tertiary}
          shape={SHAPE.pill}
          size={SIZE.compact}
          title="Open Base Web documentation"
          onClick={() => {
            gtag.event({
              action: "click_link_header_external",
              category: "navigation",
              label: "base_web",
            });
          }}
        >
          <Console size="16px" />
          <span
            className={css({
              display: "none",
              [theme.mediaQuery.small]: {
                display: "inline-block",
                marginLeft: theme.sizing.scale400,
                whiteSpace: "nowrap",
              },
            })}
          >
            Base Web
          </span>
        </Button>
      </div>
      <div
        className={css({
          marginRight: theme.sizing.scale400,
        })}
      >
        <Button
          // @ts-ignore - Missing type in baseui
          $as="a"
          href={figmaLink}
          target="_blank"
          rel="noopener"
          kind={KIND.tertiary}
          shape={SHAPE.pill}
          size={SIZE.compact}
          title="Open in Figma"
          onClick={() => {
            gtag.event({
              action: "click_link_header_external",
              category: "navigation",
              label: activePage.key ? `figma_${activePage.key}` : "figma_root",
            });
          }}
        >
          <Figma size="16px" />
          <span
            className={css({
              display: "none",
              [theme.mediaQuery.small]: {
                display: "inline-block",
                marginLeft: theme.sizing.scale400,
              },
            })}
          >
            Figma
          </span>
        </Button>
      </div>
      <Button
        shape={SHAPE.pill}
        kind={KIND.tertiary}
        size={SIZE.compact}
        onClick={() => {
          openHelpModal();
        }}
      >
        <Help size="16px" />
        <span
          className={css({
            display: "none",
            [theme.mediaQuery.small]: {
              display: "inline-block",
              marginLeft: theme.sizing.scale400,
            },
          })}
        >
          Help
        </span>
      </Button>
    </Fragment>
  );
}