function Layout()

in components/layout.tsx [45:161]
113 lines of code
5 McCabe index (conditional complexity)

function Layout({ children, ...pageProps }: Props) {
  const [css, theme] = useStyletron();
  const router = useRouter();
  const [helpModalIsOpen, setHelpModalState] = useState(false);

  pageProps.openHelpModal = useCallback(() => {
    setHelpModalState(true);
  }, []);

  const activePageKey = pageProps?.activePage?.key;
  const [previousPage, nextPage] = useSiblingPages(
    pageProps.siteMap,
    activePageKey
  );

  useEffect(() => {
    const unsubscribe = tinykeys(window, {
      f: (event) => {
        if ((event.target as HTMLInputElement).id !== "search") {
          window.open(pageProps.figmaLink, "_blank");
        }
      },
      "Shift+?": (event) => {
        if ((event.target as HTMLInputElement).id !== "search") {
          setHelpModalState(true);
        }
      },
      ArrowLeft: () => router.push("/[pageKey]", `/${previousPage.key}`),
      ArrowRight: () => router.push("/[pageKey]", `/${nextPage.key}`),
    });
    return () => {
      unsubscribe();
    };
  }, [pageProps.figmaLink]);

  return (
    <div>
      <Head>
        <title>Base Documentation</title>
        <meta
          name="description"
          content="A reference for both high-level patterns as well as
                component specific guidelines when using the Base design system."
        />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/base.svg" />
      </Head>
      <div>
        <PageContext.Provider value={pageProps}>
          <Modal
            isOpen={helpModalIsOpen}
            onClose={() => setHelpModalState(false)}
            closeable
            animate
            autoFocus
            unstable_ModalBackdropScroll
          >
            <ModalHeader>Help & Suggestions</ModalHeader>
            <ModalBody>
              <p>
                This site allows you to quickly access documentation that the
                Design Platform team maintains in Figma. Each page is a snapshot
                of one of the frames you can find in the Figma documentation
                project.
              </p>
              <p>
                Here is a list of hotkeys you can use to make navigating the
                documentation even faster:
              </p>
              <ul className={css({ listStyle: "circle" })}>
                {[
                  ["/", "Focus the search input."],
                  ["f", "Open current page's frame in Figma."],
                  ["←", "Navigate to the previous page in documentation."],
                  ["→", "Navigate to the next page in documentation."],
                  ["?", "Open the help & suggestions modal."],
                ].map(([key, description]) => (
                  <li key={key} className={css({ marginBottom: "4px" })}>
                    <HotKey $style={{ marginRight: "8px" }}>{key}</HotKey>{" "}
                    {description}
                  </li>
                ))}
              </ul>
              <p>
                Using these hotkeys, you can quickly search for the right page
                by pressing <HotKey>/</HotKey> or navigate to related pages with{" "}
                <HotKey>←</HotKey> and <HotKey>→</HotKey>. If you want to leave
                a comment or inspect further you can always open the
                corresponding frame in Figma with <HotKey>f</HotKey>.
              </p>
            </ModalBody>
          </Modal>
          <ThemeProvider theme={darkTheme}>
            <Header />
          </ThemeProvider>
          <SideNavigation />
          <main
            className={css({
              marginTop: "24px",
              [theme.mediaQuery.medium]: {
                marginTop: "84px",
              },
              [theme.mediaQuery.large]: {
                marginLeft: "300px",
              },
              padding: theme.sizing.scale800,
              paddingTop: 0,
            })}
          >
            {children}
          </main>
          <BottomNavigation />
        </PageContext.Provider>
      </div>
    </div>
  );
}