theme-ui#Container JavaScript Examples

Filter = ({ options, activeGroup, onChange, count, mobile }) => {
  return (
    <Box sx={{ mb: 6 }}>
      <Box sx={{ border: 'light', borderColor: 'muted', borderWidth: '1px 0 1px 0', mb: 2 }}>
        <Container sx={{ p: 0 }}>
          <Grid columns={[2, '1fr 2fr 1fr']}>
            <Text variant="plainText" sx={{ fontSize: 3, p: 2, my: 'auto' }}>
              Show me guides about:
            </Text>
            <Flex
              sx={{
                border: 'light',
                borderColor: 'muted',
                borderWidth: mobile ? '0 0 0 1px' : '0 1px 0 1px',
                px: 4,
                py: 2,
              }}
            >
              <Dropdown
                sx={{ width: [7, 8] }}
                options={options}
                activeGroup={activeGroup}
                onChange={onChange}
              />
            </Flex>
            {!mobile && <FeaturedCount count={count} sx={{ py: 2, px: 4 }} />}
          </Grid>
        </Container>
      </Box>
      {mobile && <FeaturedCount count={count} sx={{ px: 2 }} />}
    </Box>
  );
}

Banners = ({ bannerData }) => {
  const [changelog] = bannerData || bannerJson;

  return (
    <Banner
      content={
        <Container>
          <ThemeLink href={changelog.url} target="_blank">
            <Flex
              sx={{
                width: '100%',
                justifyContent: 'space-between',
              }}
            >
              <Text
                sx={{
                  fontWeight: 'body',
                  color: 'onBackgroundMuted',
                  fontSize: 2,
                  '& strong': { color: 'text', px: 1, fontWeight: 'body' },
                  '& p': {
                    m: 0,
                  },
                }}
              >
                {changelog.text}
              </Text>
              <Flex sx={{ alignItems: 'center', justifyContent: 'flex-end', width: '33%' }}>
                <Icon color="text" name="increase"></Icon>
                <Text sx={{ color: 'text', pl: 2, fontWeight: 'body' }}>{changelog.linkText}</Text>
              </Flex>
            </Flex>
          </ThemeLink>
        </Container>
      }
    />
  );
}

SignupCta = () => {
  const placeholder = 'We saved a slot for your email';
  return (
    <Container>
      <Grid columns={2} sx={{ mb: 6, mx: 5 }}>
        <Box sx={{ p: 5 }}>
          <Heading variant="largeHeading">
            Want Maker dev updates dripping into your mailbox?
          </Heading>
        </Box>
        <Flex sx={{ justifyContent: 'center', alignItems: 'center' }}>
          <EmailSignup placeholder={placeholder} />
        </Flex>
      </Grid>
    </Container>
  );
}

Footer = () => {
  return (
    <Container as="footer" sx={{ pt: 6 }}>
      <Grid sx={{ pb: 4 }} columns={[2, 3, 6]} gap={4}>
        <Flex sx={{ flexDirection: 'column', height: ['100%', '50%', '50%'] }}>
          <Flex sx={{ pb: 2 }}>
            <IconLink name="maker_full" url="https://www.makerdao.com" width={127} />
          </Flex>
          <Flex>
            <Flex sx={{ pr: 4 }}>
              <IconLink name="github" url="https://github.com/makerdao/" />
            </Flex>
            <Flex>
              <IconLink name="rocketchat" url="https://chat.makerdao.com/channel/dev" />
            </Flex>
          </Flex>
          <ColorModeToggle />
        </Flex>
        {links.map(([title, content]) => {
          return <Section key={title} title={title} content={content} />;
        })}
      </Grid>
    </Container>
  );
}

GuideGrid = ({ resources, path }) => {
  return (
    <Container>
      <Grid columns={[1, 3, 4]} sx={{ gridRowGap: [5, 6], gridColumnGap: 5 }}>
        {resources.map(
          (
            {
              data: {
                frontmatter: { group, title, slug, description, tags },
              },
            },
            i
          ) => {
            return (
              <GuideCard
                key={title}
                title={title}
                type={group}
                description={description}
                link={`/${path}/${slug}/`}
                linkText={'Read'}
                icon={`stamp_${(i % 5) + 1}`}
                tags={tags}
              />
            );
          }
        )}
      </Grid>
    </Container>
  );
}

NotFound = () => {
  return (
    <Layout>
      <SEO />
      <Container
        sx={{
          backgroundColor: 'background',
          padding: 16,
          borderRadius: '3px',
          marginTop: '80px',
          letterSpacing: '4px',
          fontSize: '56px',
          color: '#FF4136',
          fontFamily: 'inter',
          textAlign: 'center',
          fontWeight: 700,
        }}
      >
        <Text>#STAY THE FUCK HOME</Text>
      </Container>
      <Container
        sx={{
          fontFamily: 'inter',
          textAlign: 'center',
          backgroundColor: 'background',
          color: 'text',
          borderRadius: '3px',
        }}
      >
        <p>Not sure if the page you are searching exist!</p>
        <p>While I check feel free to navigate to the Home page</p>
      </Container>
    </Layout>
  )
}

MobileMenu = ({ close, query, bannerData }) => {
  const [{ linkText, url, text }] = bannerData;
  return (
    <Container
      sx={{
        bg: 'background',
        height: '100%',
        position: 'fixed',
        zIndex: 1,
      }}
    >
      <Flex sx={{ justifyContent: 'space-between', mb: 6, py: 2 }}>
        <Link href="/" passHref>
          <ThemeLink>
            <Icon name="maker" color="text" size={4} />
          </ThemeLink>
        </Link>
        <IconButton sx={{ cursor: 'pointer', pt: 3 }}>
          <Icon
            name="dp_close"
            size="auto"
            color="text"
            sx={{
              cursor: 'pointer',
              height: 20,
              width: 20,
            }}
            onClick={close}
          />
        </IconButton>
      </Flex>
      <Flex as="nav" sx={{ flexDirection: 'column', px: 2 }}>
        <ThemeLink href={url} target="_blank">
          <Flex sx={{ alignItems: 'center', px: 2 }}>
            <Icon color="primary" name="increase"></Icon>
            <Text sx={{ px: 2, fontSize: 5, color: 'text' }}>{linkText}</Text>
          </Flex>
        </ThemeLink>
        <Text sx={{ px: 2, fontSize: 2, color: 'onBackgroundMuted' }}>{text}</Text>
        {LINKS.map(({ name, url }) => (
          <Link href={{ pathname: url, query }} passHref key={name}>
            <NavLink
              key={name}
              sx={{
                py: 4,
                fontSize: 7,
              }}
              variant="links.mobileNav"
            >
              {name}
            </NavLink>
          </Link>
        ))}
      </Flex>
    </Container>
  );
}

Page = ({ file, guides, documentation, bannerFile, featGuidesFile, preview }) => {
  const [mobile, setMobile] = useState(false);
  const bpi = useBreakpointIndex({ defaultIndex: 2 });
  const router = useRouter();

  const [data, form] = useGithubJsonForm(file, landingPageFormOptions);
  const [bannerData, bannerForm] = useBannerForm(bannerFile, preview);
  const [featGuidesData, featGuidesForm] = useFeaturedGuidesForm(featGuidesFile, preview);

  useFormScreenPlugin(bannerForm);
  useFormScreenPlugin(featGuidesForm);
  usePlugin(form);
  useGithubToolbarPlugins();
  useCreateDocument([...guides, ...documentation]);

  useEffect(() => {
    setMobile(bpi < 2);
  }, [bpi]);

  const featuredGuides = featGuidesData.featuredGuides.map((slug) =>
    guides.find(({ data }) => data.frontmatter.slug === slug)
  );

  return (
    <SingleLayout bannerData={bannerData.banner} mobile={mobile} router={router}>
      <Head>
        <title>Maker Protocol Developer Portal</title>
      </Head>
      <InlineForm form={form}>
        <Grid sx={{ rowGap: 6 }}>
          <PageLead cta="Start learning about the Maker Protocol" mobile={mobile} />
          <GuideList title="Featured Guides" path="guides" guides={featuredGuides} />
          <IntroText mobile={mobile} />
          <Grid>
            <Container>
              <Heading variant="megaHeading">
                Get Started&nbsp;<span sx={{ color: 'onBackgroundMuted' }}>With</span>
              </Heading>
            </Container>
            <Grid sx={{ rowGap: 5 }}>
              <DocumentationList />
              <LibrariesSdks />
            </Grid>
          </Grid>
          <SecurityFeatures />
          <CommunityCta mobile={mobile} />
          <AboutThisSite preview={preview} />
          <NewsletterCallout />
        </Grid>
      </InlineForm>
    </SingleLayout>
  );
}

// Our GitHub app redirects back to this page with auth code
export default function Authorizing() {
  // Let the main app know, that we received an auth code from the GitHub redirect
  useGithubAuthRedirect();

  return <Container>Authorizing with GitHub, please wait...</Container>;
}

ResourcesLayout = ({
  resourcePath,
  sidebar,
  slug,
  toc,
  navData,
  mobile,
  router,
  children,
}) => {
  return resourcePath === ContentTypes.DOCUMENTATION ? (
    <SingleLayout
      mobile={mobile}
      subnav={<SubNav links={navData.navItems} router={router} />}
      router={router}
    >
      <Grid columns={['auto', 'auto', '1fr 4fr 1fr']} gap="0">
        {sidebar || <Box />}
        <Box
          sx={{
            borderRadius: 0,
            py: 0,
            px: 4,
            pb: 4,
            border: mobile ? undefined : 'solid',
            borderColor: 'muted',
            borderWidth: '0 1px 0 0',
          }}
        >
          {children}
        </Box>
        {!mobile && <Infobar resourcePath={resourcePath} slug={slug} toc={toc} />}
      </Grid>
    </SingleLayout>
  ) : (
    <GuidesLayout
      mobile={mobile}
      subnav={<SubNav links={navData.navItems} router={router} />}
      router={router}
      infobar={!mobile && <Infobar resourcePath={resourcePath} slug={slug} toc={toc} />}
    >
      <Container sx={{}}>
        <Grid columns={'auto'}>
          <Box
            sx={{
              border: mobile ? undefined : 'solid',
              borderColor: 'muted',
              borderWidth: '0 1px 0 0',
              pr: [0, 0, 4],
            }}
          >
            {children}
          </Box>
        </Grid>
      </Container>
    </GuidesLayout>
  );
}

SubNav = ({ links, query, router }) => {
  const activeGroup = useStore((state) => state.activeGroup);
  const activeLink = links.find((link) => link.slug === activeGroup);
  const refs = useMemo(() => Array.from({ length: links.length }).map(() => createRef()), [
    links.length,
  ]);

  useEffect(() => {
    setTimeout(() => {
      const idx = links.indexOf(activeLink);
      refs[idx]?.current?.scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'center',
      });
    }, 200);
  }, [activeLink, links, refs, router?.query.slug]);

  return (
    <Box
      sx={{
        border: 'light',
        borderColor: 'muted',
        borderWidth: '1px 0 1px 0',
        bg: 'background',
      }}
    >
      <Container sx={{ mt: 2 }}>
        <Flex
          as="nav"
          sx={{
            alignItems: 'center',
            pb: 2,
            overflow: 'auto',
            '::-webkit-scrollbar': {
              display: 'none',
            },
            scrollbarWidth: 'none',
          }}
        >
          {links.map(({ name, url, slug }, i) => (
            <Link href={{ pathname: url, query }} passHref key={name}>
              <NavLink
                ref={refs[i]}
                sx={{
                  color: slug === activeGroup ? 'primary' : undefined,
                  minWidth: 'max-content',
                  pl: 2,
                  pr: 4,
                  '&:first-of-type': { pl: 0 },
                }}
              >
                {name}
              </NavLink>
            </Link>
          ))}
        </Flex>
      </Container>
    </Box>
  );
}

SecurityFeatures = () => {
  return (
    <Container>
      <Flex
        sx={{
          flexDirection: 'column',
        }}
      >
        <Heading variant="largeHeading">Security Features</Heading>
        <Flex
          sx={{
            alignItems: 'center',
            mt: 5,
          }}
        >
          <Grid columns={[1, '1fr 2fr']}>
            <Icon color="textMuted" name="security" size={7} sx={{ ml: 4 }} />
            <Flex
              sx={{
                flexDirection: 'column',
                width: ['100%', '80%', '100%'],
                p: 0,
                ml: [0, 5, 0],
              }}
            >
              <Heading variant="mediumHeading" sx={{ pb: 3 }}>
                Security details
              </Heading>
              <Text sx={{ pb: 3, fontSize: [4, 5], color: 'onBackgroundMuted' }}>
                <InlineTextarea name="securitySubtext" />
              </Text>
              <Link href="/security">
                <Flex sx={{ alignItems: 'center' }}>
                  <Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
                  <ThemeLink>Learn more about Security</ThemeLink>
                </Flex>
              </Link>
            </Flex>
          </Grid>
        </Flex>
      </Flex>
    </Container>
  );
}

IntroText = ({ mobile }) => {
  return (
    <Container>
      <Flex
        sx={{
          alignItems: 'center',
          flexWrap: mobile ? 'wrap' : 'nowrap',
        }}
      >
        <Flex pb="4" sx={{ width: '100%', flexDirection: 'column', minWidth: ['50vw', 600] }}>
          <Heading variant="megaHeading">About</Heading>
          <Heading
            variant="megaHeading"
            sx={{
              color: 'onBackgroundMuted',
            }}
          >
            The Protocol
          </Heading>
        </Flex>

        <Heading
          sx={{
            pb: 4,
            color: 'onBackgroundMuted',
          }}
        >
          <InlineTextarea name="aboutSubheading" />
        </Heading>
      </Flex>
      <Grid columns={[1, 2]}>
        <Flex sx={{ flexDirection: 'column', width: '100%' }}>
          <Text
            sx={{
              pb: 4,
              color: 'onBackgroundMuted',
            }}
          >
            <InlineTextarea name="aboutMakerProtocol" />
          </Text>
          <Link href="/documentation/introduction-to-the-maker-protocol">
            <Flex sx={{ alignItems: 'center', pb: [5, 0] }}>
              <Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
              <ThemeLink>Learn more about the Maker Protocol.</ThemeLink>
            </Flex>
          </Link>
        </Flex>
        <Flex sx={{ px: 4, flexDirection: 'column' }}>
          <Heading sx={{ pb: 3, pr: [0, 0, 6] }}>
            <InlineText name="devUpdates1" />
          </Heading>
          <EmailSignup sx={{ fontSize: 5 }} placeholder="We saved a slot for your email" />
        </Flex>
      </Grid>
    </Container>
  );
}

Header = ({ query, subnav, mobile, router }) => {
  const [mobileOpened, setMobileOpened] = useState(false);

  useEffect(() => {
    setMobileOpened(false);
  }, [router?.asPath]);
  return (
    <Box
      sx={{ width: '100%', zIndex: 1, position: [mobileOpened ? 'fixed' : undefined, undefined] }}
    >
      {mobileOpened ? (
        <MobileMenu close={() => setMobileOpened(false)} bannerData={bannerData} />
      ) : (
        <>
          {!mobile && <Banners bannerData={bannerData} />}
          <Container as="header" mt={[0, 2]} sx={{ bg: 'background' }}>
            <Flex
              sx={{
                alignItems: 'center',
                justifyContent: 'space-between',
                mb: [0, 3],
                py: [2, 0],
              }}
            >
              <Link href="/" passHref>
                <ThemeLink>
                  <Icon name="maker" color="text" size={4} />
                </ThemeLink>
              </Link>
              <Flex sx={{ alignItems: 'center' }}>
                <Flex
                  as="nav"
                  sx={{
                    alignItems: 'center',
                  }}
                >
                  {LINKS.map(({ name, url }) => (
                    <Link href={{ pathname: url, query }} passHref key={name}>
                      <NavLink
                        key={name}
                        sx={{
                          display: ['none', 'none', 'block'],
                          pr: 4,
                          '&:last-child': { pr: [null, 0] },
                        }}
                        variant="links.nav"
                      >
                        {name}
                      </NavLink>
                    </Link>
                  ))}
                </Flex>
                <IconButton sx={{ display: ['block', 'block', 'none'], cursor: 'pointer' }}>
                  <Icon
                    name="dp_menu"
                    size="auto"
                    color="text"
                    sx={{
                      height: 24,
                      width: 19,
                    }}
                    onClick={() => setMobileOpened(!mobileOpened)}
                  />
                </IconButton>
              </Flex>
            </Flex>
          </Container>
        </>
      )}
      {subnav ?? null}
    </Box>
  );
}

GuideList = ({ guides, title, path }) => {
  return (
    <Flex>
      <Box>
        <Container>
          <Flex
            sx={{
              alignItems: 'center',
              flexWrap: 'wrap',
              mb: 3,
            }}
          >
            <Heading variant="largeHeading">{title}</Heading>

            <Link href={'/guides'} passHref>
              <Flex sx={{ ml: 'auto', alignItems: 'center' }}>
                <Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
                <ThemeLink sx={{ color: 'text', cursor: 'pointer' }}>View All</ThemeLink>
              </Flex>
            </Link>
          </Flex>
        </Container>
        <Grid
          gap={4}
          sx={{
            ml: [0, 2],
            gridAutoFlow: 'column',
            overflowX: 'auto',
            pl: [2, 'calc(50% - 1140px / 2)'],
            '::-webkit-scrollbar': {
              display: 'none',
            },
            scrollbarWidth: 'none',
          }}
        >
          {guides.map((guide, i) => {
            if (!guide) return null;
            const {
              data: {
                frontmatter: { group, title, slug, description, tags },
              },
            } = guide;
            return (
              <GuideCard
                key={title}
                title={title}
                type={group}
                description={description}
                link={`/${path}/${slug}/`}
                linkText={'Read'}
                icon={`stamp_${(i % 5) + 1}`}
                tags={tags}
                sx={{
                  width: 7,
                  border: 'light',
                  borderColor: 'muted',
                  borderRadius: 'small',
                  '&:hover': {
                    borderColor: 'primaryEmphasis',
                  },
                  p: 3,
                }}
              />
            );
          })}
        </Grid>
      </Box>
    </Flex>
  );
}

Ecosystem = ({ title, items }) => {
  const tabs = items
    .reduce((acc, { categories }) => acc.push(...categories) && acc, [])
    .filter((item, idx, array) => array.indexOf(item) === idx)
    .sort();
  const [activeTab, setActiveTab] = useState(tabs[0]);

  return (
    <Container>
      <Flex
        sx={{
          flexDirection: 'column',
          mb: 6,
        }}
      >
        <Flex
          sx={{
            pb: 4,
            alignItems: 'center',
          }}
        >
          <Flex sx={{ width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
            <Heading>{title}</Heading>
            <ThemeLink href={SUBMIT_LINK} target="_blank">
              <Flex sx={{ alignItems: 'center' }}>
                <Text sx={{ color: 'text', cursor: 'pointer' }}>Submit your tool</Text>
                <Icon sx={{ ml: 2 }} color="primary" name={'arrow_right'}></Icon>
              </Flex>
            </ThemeLink>
          </Flex>
        </Flex>
        <Flex
          sx={{
            alignItems: 'center',
            pb: 2,
            overflow: 'auto',
          }}
        >
          {tabs.map((name) => (
            <NavLink
              key={name}
              onClick={() => setActiveTab(name)}
              sx={{
                color: activeTab === name ? 'primary' : undefined,
                minWidth: 'max-content',
                pl: 2,
                pr: 4,
                '&:first-of-type': { pl: 0 },
              }}
            >
              {EcosystemCategories[name]}
            </NavLink>
          ))}
        </Flex>

        <Grid columns={[1, 2]} sx={{ width: '100%' }}>
          {items
            .filter(({ categories }) => categories.includes(activeTab))
            .map(({ title, link, description }) => {
              return <ListItem key={title} title={title} description={description} link={link} />;
            })}
        </Grid>
      </Flex>
    </Container>
  );
}

DocumentationList = () => {
  return (
    <Box>
      <Container>
        <Flex sx={{ mb: 3, alignItems: 'center', justifyContent: 'space-between' }}>
          <Heading variant="largeHeading">Documentation</Heading>

          <Link href={'/documentation'} passHref>
            <Flex sx={{ ml: 3, alignItems: 'center' }}>
              <Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
              <ThemeLink sx={{ color: 'text', cursor: 'pointer' }}>Start learning</ThemeLink>
            </Flex>
          </Link>
        </Flex>
      </Container>
      <Grid
        sx={{
          columnGap: 3,
          gridAutoFlow: 'column',
          overflowX: 'auto',
          pl: [2, 'calc(50% - 1140px / 2)'],
          '::-webkit-scrollbar': {
            display: 'none',
          },
          scrollbarWidth: 'none',

          gridTemplateRows: 'auto',

          rowGap: 3,
        }}
      >
        {docLinks.map(({ name, url }) => {
          return (
            <Link key={name} href={`${url}`} passHref>
              <Card
                sx={{
                  width: 180,
                  border: 'light',
                  bg: 'background',
                  borderColor: 'muted',
                  cursor: 'pointer',
                  '&:hover': {
                    borderColor: 'primaryEmphasis',
                  },
                }}
              >
                <Flex
                  sx={{
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    height: '100%',
                  }}
                >
                  <Heading>{name}</Heading>
                  <Flex sx={{ alignItems: 'center' }}>
                    <Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
                    <ThemeLink sx={{ color: 'text', cursor: 'pointer' }}>View Docs</ThemeLink>
                  </Flex>
                </Flex>
              </Card>
            </Link>
          );
        })}
      </Grid>
    </Box>
  );
}

CodeBox = ({ cta, sections }) => {
  const [activeTool, setActiveTool] = useState(0);

  return (
    <Container>
      <Heading sx={{ pb: [3, 4] }} variant="mediumHeading">
        {cta}
      </Heading>
      <Grid
        columns={[1, '1fr auto']}
        sx={{
          columnGap: 4,
        }}
      >
        <Box>
          <Card
            sx={{
              height: '500px',
              width: '100%',
              bg: 'background',
            }}
          >
            <CodeWrapper
              value={sections[activeTool].code}
              language={sections[activeTool].language}
            />
          </Card>
        </Box>
        <Box>
          <Grid
            sx={{
              rowGap: 4,
            }}
          >
            {sections.map((tool, i) => {
              const { title, des, link } = tool;
              const isActive = i === activeTool;
              return (
                <Box key={tool.title}>
                  <Heading
                    variant="microHeading"
                    onClick={() => {
                      setActiveTool(i);
                    }}
                    sx={{ cursor: 'pointer' }}
                  >
                    {title}
                  </Heading>
                  {!isActive ? null : (
                    <Grid
                      sx={{
                        rowGap: 2,
                        pt: 2,
                      }}
                    >
                      <Text>{des}</Text>
                      <Link href={link} passHref>
                        <Flex sx={{ alignItems: 'center' }}>
                          <Icon sx={{ mr: 2 }} name={'arrow_right'}></Icon>
                          <ThemeLink sx={{ color: 'text', cursor: 'pointer' }}>Read More</ThemeLink>
                        </Flex>
                      </Link>
                    </Grid>
                  )}
                </Box>
              );
            })}
          </Grid>
        </Box>
      </Grid>
    </Container>
  );
}

ArticlesList = ({ resources, title, path }) => {
  const bpi = useBreakpointIndex({ defaultIndex: 2 });
  return (
    <Container>
      <Flex
        sx={{
          flexDirection: 'column',
        }}
      >
        <Flex
          sx={{
            pb: 4,
            alignItems: 'center',
          }}
        >
          <Heading pr={3}>{title}</Heading>
        </Flex>
        <Grid sx={{ width: '100%' }}>
          {resources.map(
            ({
              data: {
                frontmatter: { group, title, slug, description },
              },
            }) => {
              return (
                <ListItem
                  key={title}
                  title={title}
                  type={group}
                  description={description}
                  link={`/${path}/${slug}/`}
                  linkText={'Read'}
                  isMobile={bpi < 2}
                />
              );
            }
          )}
        </Grid>
      </Flex>
    </Container>
  );
}

AboutThisSite = ({ preview }) => {
  return (
    <Container>
      <Grid columns={[1, 2]}>
        <Flex sx={{ flexDirection: 'column', alignSelf: 'end' }}>
          <Heading
            variant="megaHeading"
            sx={{
              color: 'onBackgroundMuted',
            }}
          >
            About
          </Heading>
          <Heading variant="megaHeading">This Site</Heading>
        </Flex>
        <Heading sx={{ alignSelf: 'end', pb: 3 }}>
          <InlineTextarea name="aboutThisSiteSubheading" />
        </Heading>
      </Grid>
      <Flex>
        <Text
          sx={{
            py: [0, 4],
            color: 'onBackgroundMuted',
            columns: preview ? undefined : '2 200px',
            width: '100%',
          }}
        >
          <InlineTextarea name="aboutThisSiteSubtext" />
        </Text>
      </Flex>
      <Flex sx={{ width: '100%', justifyContent: 'center' }}>
        <Flex sx={{ flexDirection: 'column', pt: 2, justifyContent: 'center' }}>
          <Box
            sx={{
              ml: [0, 'auto'],
              px: [0, 4],
              py: [3, 3, 4],
            }}
          >
            <EditLink />
          </Box>
          <ThemeLink href={`${GITHUB_EDIT_LINK}/data/landingPage.json`} target="_blank">
            <Flex sx={{ alignItems: 'center', justifyContent: 'center' }}>
              <Icon sx={{ mr: 2 }} color="primary" name="github"></Icon>
              <Text sx={{ color: 'text', cursor: 'pointer' }}>Edit on Github</Text>
            </Flex>
          </ThemeLink>
        </Flex>
      </Flex>
    </Container>
  );
}

About = () => {
  return (
    <Layout>
      <SEO />
      <Container
        sx={{
          padding: 4,
          color: 'text',
          fontFamily: 'inter',
          textAlign: 'center',
          backgroundColor: 'cardBackground',
          borderRadius: '8px',
          borderWidth: 1,
          borderStyle: 'solid',
          borderColor: 'cardBorder',
          lineHeight: '24px',
        }}
      >
        <Box p={4}>
          <h3>
            "Opportunity 3 - Start <em>contributing</em> immediately
          </h3>
          <Text>
            It would be great if any software engineer with spare time can just
            peruse open Github issues across all OpenAir [Covid-19] projects,
            filter for their area of expertise and just submit little PRs within
            their specific time constraints. You shouldn’t even need to engage
            too deeply with the wider project organisation; just see a list of
            valuable quickwins that you can tackle rapidly to add value to any
            team that needs it."
          </Text>
        </Box>
        <p>
          This project was inspired by the above excerpt from
          <Link
            href="https://jonnyparris.github.io/COVID-helping"
            sx={{ color: 'secondary' }}
            target="_blank"
            rel="noopener noreferrer"
          >
            &nbsp;this blogpost.
          </Link>
        </p>
      </Container>
    </Layout>
  )
}

LibrariesSdks = () => {
  const daijsCode = `import Maker from '@makerdao/dai';

  const maker = 
    await Maker.create('http', {
    url: myRpcUrl,
    privateKey: myPrivateKey
  });

  const vault = 
    await maker
      .service('mcd:cdpManager')
      .openLockAndDraw(
        'ETH-A', ETH(50), DAI(1000)
      );`;
  return (
    <Container>
      <Heading variant="largeHeading" pb={3}>
        Libraries
      </Heading>
      <Grid columns={[1, '1fr auto']} sx={{ gridColumnGap: 4, gridRowGap: [4, 'auto'] }}>
        <CodeWindow code={daijsCode} />
        <Grid columns={[1, 'auto', 2]} sx={{ gridRowGap: 3, gridTemplateRows: '2em' }}>
          <Heading variant="smallHeading">Dai.js</Heading>
          <Flex
            sx={{
              flexDirection: 'column',
              gridRowStart: 2,
              justifyContent: 'space-between',
              pb: [4, 0],
            }}
          >
            <Flex sx={{ flexDirection: 'column', color: 'onBackgroundMuted' }}>
              <Text
                variant="plainText"
                sx={{
                  pb: 2,
                }}
              >
                <InlineTextarea name="sdksAndToolsHeading" />
              </Text>
              <Text>
                <InlineTextarea name="sdksAndToolsText" />
              </Text>
            </Flex>
            <Link href="/documentation/introduction-to-dai-js">
              <Flex sx={{ alignItems: 'center', py: [3, 3, 0] }}>
                <Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
                <ThemeLink>View Dai.js docs</ThemeLink>
              </Flex>
            </Link>
          </Flex>
          <Flex
            sx={{
              flexDirection: 'column',
              gridRowStart: ['auto', 4, 2],
              gridColumnStart: [1, 1, 2],
            }}
          >
            <Flex
              sx={{
                flexDirection: 'column',
                color: 'onBackgroundMuted',
              }}
            >
              <Text sx={{ pb: 2, fontSize: [4, 5] }}>
                <InlineTextarea name="pyMakerHeading" />
              </Text>
              <Text>
                <InlineTextarea name="pyMakerSubtext" />
              </Text>
            </Flex>
            <Link href="/documentation/pymaker">
              <Flex sx={{ alignItems: 'center', py: [3, 3, 4] }}>
                <Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
                <ThemeLink>View pyMaker docs</ThemeLink>
              </Flex>
            </Link>
          </Flex>
        </Grid>
      </Grid>

      <Grid
        columns={[1, 'auto', 3]}
        sx={{
          pt: 4,
        }}
      >
        <Heading
          variant="largeHeading"
          sx={{ py: 4, gridColumnStart: [1, 2], gridColumnEnd: [2, 4] }}
        >
          <InlineTextarea name="toolsHeading" />
        </Heading>
        <Flex
          sx={{
            flexDirection: 'column',
            gridColumnStart: [1, 2],
          }}
        >
          <Icon name="keeper" color="textMuted" sx={{ width: '164px', height: '164px', mb: 4 }} />
          <Heading>Keepers</Heading>
          <Text sx={{ py: 3, color: 'onBackgroundMuted' }}>
            <InlineTextarea name="keepersSubtext" />
          </Text>
          <Link href="/documentation/introduction-to-auction-keepers">
            <Flex sx={{ alignItems: 'center' }}>
              <Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
              <ThemeLink>Learn more about Maker Keepers</ThemeLink>
            </Flex>
          </Link>
        </Flex>
        <Flex
          sx={{
            flexDirection: 'column',
            gridColumnStart: [1, 3],
            mt: [4, 0],
          }}
        >
          <Icon
            name="wireframeGlobe"
            color="textMuted"
            sx={{ width: '164px', height: '164px', mb: 4 }}
          />
          <Heading>CLIs</Heading>
          <Text sx={{ py: 3, color: 'onBackgroundMuted' }}>
            <InlineTextarea name="CLIsSubtext" />
          </Text>
          <Link href="/documentation/mcd-cli">
            <Flex sx={{ alignItems: 'center', mt: 'auto' }}>
              <Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
              <ThemeLink>Learn more about the CLIs</ThemeLink>
            </Flex>
          </Link>
        </Flex>
      </Grid>
    </Container>
  );
}

NewsletterCallout = () => {
  const { inputEl, subscribe, loading, success, errorMessage } = useEmailSubscribe();
  return (
    <Container sx={{ display: 'flex', justifyContent: 'center', pb: 6 }}>
      <Grid gap={3}>
        <Heading sx={{ display: 'flex', justifyContent: 'center' }} variant="mediumHeading">
          Want Maker dev updates dripping into your inbox?
        </Heading>
        <Flex sx={{ flexDirection: 'column', justifyContent: 'center' }}>
          <Text variant="plainText" sx={{ alignSelf: 'center' }}>
            <InlineTextarea name="devUpdatesSubtext1" />
          </Text>
          <Text sx={{ alignSelf: 'center', pb: 3 }} variant="plainText">
            <InlineTextarea name="devUpdatesSubtext2" />
          </Text>
        </Flex>
        {success ? (
          <Card sx={{ p: 4 }}>
            <Flex sx={{ flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
              <Flex
                sx={{
                  position: 'absolute',
                  top: '-50px',
                  alignItems: 'center',
                  justifyContent: 'center',
                  bg: 'primary',
                  size: '40px',
                  borderRadius: 'round',
                  mx: 2,
                }}
              >
                <Icon name="checkmark" size="3" />
              </Flex>
              <Text variant="plainText" sx={{ fontWeight: 'bold', fontSize: 4 }}>
                Thank you for signing up!
              </Text>
              <Text variant="plainText" sx={{ fontSize: 2 }}>
                Stay tuned, you will get dev updates soon.
              </Text>
            </Flex>
          </Card>
        ) : (
          <>
            <Flex sx={{ flexDirection: 'column' }}>
              <Flex sx={{ justifyContent: 'center' }}>
                <Input
                  aria-label="Email for newsletter"
                  ref={inputEl}
                  type="email"
                  placeholder="Email"
                  disabled={loading}
                  sx={{
                    fontFamily: 'heading',
                    fontSize: 5,
                    bg: 'onBackground',
                    borderColor: 'onBackground',
                    borderRadius: (theme) =>
                      `${theme.radii.small}px 0px 0px ${theme.radii.small}px`,
                    pl: 4,
                    '&:focus': {
                      color: 'background',
                    },
                  }}
                ></Input>
                <Button
                  disabled={loading}
                  onClick={subscribe}
                  sx={{
                    borderColor: 'primary',
                    borderRadius: (theme) =>
                      `0px ${theme.radii.small}px ${theme.radii.small}px 0px`,
                    py: 2,
                    width: 7,
                    fontSize: 5,
                  }}
                >
                  Sign up
                </Button>
              </Flex>
              {errorMessage && (
                <Text variant="plainText" sx={{ py: 2, px: 4, fontSize: 1, color: 'primary' }}>
                  {errorMessage}
                </Text>
              )}
            </Flex>
          </>
        )}
      </Grid>
    </Container>
  );
}

PageLead = ({ cta, mobile }) => {
  return (
    <Container>
      <Flex sx={{ py: [4, 4, 6], flexDirection: 'column', position: 'relative' }}>
        <Icon
          color="textMuted"
          name="rect_1"
          size="100px"
          sx={{
            position: 'absolute',
            left: mobile ? '5%' : '30%',
            transform: mobile ? 'scale(0.5, 0.5)' : undefined,
            top: mobile ? '-10%' : '30px',
          }}
        />
        <Icon
          color="textMuted"
          name="rect_2"
          size="120px"
          sx={{
            position: 'absolute',
            top: mobile ? '-50px' : '85px',
            right: mobile ? '30%' : '200px',
            transform: mobile ? 'scale(0.5, 0.5)' : undefined,
          }}
        />
        <Icon
          color="textMuted"
          name="rect_3"
          size="160px"
          sx={{
            position: 'absolute',
            top: mobile ? '-50px' : '200px',
            right: mobile ? '-5%' : '25px',
            transform: mobile ? 'scale(0.3, 0.3)' : undefined,
          }}
        />
        <Icon
          color="textMuted"
          name="rect_4"
          size="120px"
          sx={{
            position: 'absolute',
            bottom: mobile ? '-15%' : '65px',
            right: mobile ? '10%' : '225px',
            transform: mobile ? 'scale(0.5, 0.5)' : undefined,
          }}
        />
        <Icon
          color="textMuted"
          name="rect_5"
          size="115px"
          sx={{
            position: 'absolute',
            bottom: mobile ? '-60%' : '-50px',
            left: mobile ? '60%' : '400px',
            transform: mobile ? 'translate(-100%, -100%) scale(0.5, 0.5);' : undefined,
          }}
        />
        <Icon
          color="textMuted"
          name="rect_6"
          size="180px"
          sx={{
            position: 'absolute',
            bottom: mobile ? '20px' : '40px',
            left: mobile ? undefined : '-65px',
            right: mobile ? '67%' : undefined,
            transform: mobile ? 'scale(0.4, 0.4)' : undefined,
          }}
        />
        <Heading variant="megaHeading">
          <InlineText name="primaryNavHeader" />
        </Heading>
        <Heading sx={{ color: 'onBackgroundMuted' }} variant="megaHeading">
          <InlineText name="secondaryNavHeader" />
        </Heading>
        <Flex sx={{ flexDirection: 'column', pl: [5, 7], mt: 3, width: ['100%', '75%'] }}>
          <Text
            className="subtext"
            sx={{
              color: 'onBackgroundMuted',
              mb: 2,
            }}
          >
            <InlineText name="subtext" />
          </Text>
          <Link href="/documentation/introduction-to-the-maker-protocol">
            <Flex sx={{ alignItems: 'center' }}>
              <Icon sx={{ mr: 2 }} color="primary" name={'arrow_right'}></Icon>
              <ThemeLink>{cta}</ThemeLink>
            </Flex>
          </Link>
        </Flex>
      </Flex>
    </Container>
  );
}

CommunitySection = ({ mobile }) => {
  const ctaContent = [
    {
      title: 'Join our dev community',
      link: 'https://chat.makerdao.com/channel/dev',
      text: 'Join our chat',
    },
    {
      title: 'Join the conversation',
      link: 'https://forum.makerdao.com/c/devs/19',
      text: 'Join our forum',
    },
    {
      title: 'Be a contributor',
      link: 'https://github.com/makerdao/developer-portal',
      text: 'Github',
    },
  ];

  return (
    <Container>
      <Card sx={{ p: 0, display: 'flex', width: '100%', position: 'relative', zIndex: 0 }}>
        <Icon
          color="textMuted"
          name="tri_1"
          size="150px"
          sx={{
            position: 'absolute',
            top: '-70px',
            left: '60px',
            transform: mobile ? 'scale(0.5, 0.5)' : undefined,
          }}
        />
        <Icon
          color="textMuted"
          name="tri_2"
          size="250px"
          sx={{
            position: 'absolute',
            alignSelf: 'flex-end',
            right: '5px',
            top: '-120px',
            transform: mobile ? 'scale(0.5, 0.5)' : undefined,
          }}
        />
        <Icon
          color="textMuted"
          name="tri_3"
          size="240px"
          sx={{
            position: 'absolute',
            left: '-130px',
            top: '240px',
          }}
        />
        <Icon
          color="textMuted"
          name="tri_4"
          size="90px"
          sx={{
            position: 'absolute',
            alignSelf: 'flex-end',
            right: '60px',
            bottom: '-50px',
          }}
        />
        <Grid sx={{ p: 4, rowGap: 4 }}>
          <Flex sx={{ justifyContent: 'center' }}>
            <Heading variant="largeHeading">
              <InlineText name="joinUs" />
            </Heading>
          </Flex>

          <Grid columns={[1, 3]} sx={{ py: 4 }}>
            {ctaContent.map(({ title, link, text }) => (
              <Card sx={{ p: [3, 3, 4], bg: 'onBackground' }} key={title}>
                <Grid sx={{ height: '100%' }}>
                  <Heading sx={{ color: 'background' }}>{title}</Heading>
                  <ThemeLink sx={{ alignSelf: 'end' }} href={link} target="_blank">
                    <Flex sx={{ alignItems: 'center' }}>
                      <Icon name="increase" color="primary"></Icon>
                      <Text variant="largeText" sx={{ color: 'background', px: 2 }}>
                        {text}
                      </Text>
                    </Flex>
                  </ThemeLink>
                </Grid>
              </Card>
            ))}
          </Grid>
        </Grid>
      </Card>
      <Flex
        sx={{
          justifyContent: mobile ? 'space-between' : 'center',
          alignItems: 'center',
          px: [0, 5, 4],
          py: [5, 4],
        }}
      >
        <Icon color="textMuted" name="smiley" size={6} />
        <Flex sx={{ width: ['50%', '100%', '50%'], p: [0, 4] }}>
          <Heading>
            <InlineTextarea name="communityCallout" />
          </Heading>
        </Flex>
      </Flex>
    </Container>
  );
}