function Page()

in pages/[pageKey].tsx [48:108]
57 lines of code
1 McCabe index (conditional complexity)

function Page({ image }: { image: ImageData }) {
  const [css, theme] = useStyletron();
  const { activePage, siteMap, figmaLink } = useContext(PageContext);

  // Scroll to top of page when image changes.
  useEffect(() => {
    window.scroll({ top: 0 });
  }, [image]);

  const [previousPage, nextPage] = useSiblingPages(siteMap, activePage.key);
  const title = useMemo(
    () => `${activePage.sectionName} → ${activePage.name}`,
    [activePage]
  );

  return (
    <div
      className={css({
        display: "flex",
        flexDirection: "column",
        maxWidth: "1280px",
      })}
    >
      <Head>
        <title>{title}</title>
        <meta property="og:title" content={title} key="title" />
      </Head>
      <div
        className={css({
          display: "flex",
          ...theme.borders.border300,
          borderWidth: "2px",
          background: theme.colors.white,
          marginBottom: theme.sizing.scale800,
        })}
      >
        <Image
          {...image}
          id="frame-image"
          key={activePage.key}
          alt={title}
          quality={100}
        />
      </div>
      <div
        className={css({
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "space-between",
          [theme.mediaQuery.medium]: {
            flexWrap: "nowrap",
          },
        })}
      >
        <SiblingPageButton page={previousPage} direction={-1} />
        <SiblingPageButton page={nextPage} direction={1} />
        <FigmaButton page={activePage} figmaLink={figmaLink} />
      </div>
    </div>
  );
}