theme-ui#Grid JavaScript Examples

Products = ({ products }) => {
  return (
    <Grid columns={2}>
      {products.map((product) => (
        <Product key={product.sku} {...product} />
      ))}
    </Grid>
  )
}

PriceProducts = ({ products }) => {
  return (
    <Grid columns={2}>
      {products.map((product) => (
        <PriceProduct key={product.price_id} {...product} />
      ))}
    </Grid>
  )
}

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>
  );
}

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>
  );
}

ListItem = ({ title, type, link, linkText, description, isMobile }) => {
  return (
    <Card px={4}>
      <Link href={link} passHref>
        <Grid columns={['1fr auto', '1fr 1fr auto']}>
          <Flex sx={{ flexDirection: 'column' }}>
            <Heading sx={{ cursor: 'pointer' }} variant="microHeading">
              {title}
            </Heading>
            <Text sx={{ cursor: 'pointer' }}>{description}</Text>
          </Flex>

          {!isMobile && (
            <Flex sx={{ alignItems: 'center' }}>
              <Text>{type}</Text>
            </Flex>
          )}

          <Flex sx={{ alignItems: 'center', justifyContent: 'flex-end' }}>
            <Text sx={{ variant: 'smallText', cursor: 'pointer' }} pr={2}>
              {linkText}
            </Text>
            <Icon name="increase" />
          </Flex>
        </Grid>
      </Link>
    </Card>
  );
}

ListItem = ({ title, link, description }) => (
  <Card px={4}>
    <ThemeLink href={link} target="_blank">
      <Grid columns={'1fr auto'}>
        <Flex sx={{ flexDirection: 'column' }}>
          <Heading sx={{ cursor: 'pointer' }} variant="microHeading">
            {title}
          </Heading>
          <Text sx={{ cursor: 'pointer' }} variant="smallText">
            {description}
          </Text>
        </Flex>
        <Flex sx={{ alignItems: 'center', justifyContent: 'flex-end' }}>
          <Icon name="increase" color="text" />
        </Flex>
      </Grid>
    </ThemeLink>
  </Card>
)

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>
  );
}

GuideCard = ({ title, link, linkText, description, icon, tags, ...props }) => {
  return (
    <Box {...props}>
      <Link href={link} passHref>
        <Grid sx={{ height: '100%', gap: 3, gridTemplateRows: '50px auto 1fr auto' }}>
          <Icon color="mutedAlt" name={icon} size={5}></Icon>
          <Heading sx={{ cursor: 'pointer' }} variant="smallHeading">
            {title}
          </Heading>
          <Text
            sx={{
              cursor: 'pointer',
              display: '-webkit-inline-box',
              overflow: 'hidden',
              maxHeight: '70px',
              WebkitLineClamp: 3,
              WebkitBoxOrient: 'vertical',
            }}
          >
            {description}
          </Text>
          <TagList tags={tags} />
          <Flex sx={{ alignItems: 'center', alignSelf: 'end' }}>
            <Icon name="arrow_right" color="primary" mr={2} />
            <ThemeLink>{linkText}</ThemeLink>
          </Flex>
        </Grid>
      </Link>
    </Box>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

ResourcePresentation = ({
  file,
  sharedContentfile,
  resources,
  relatedResources,
  contentType,
  preview,
  mobile,
}) => {
  const cms = useCMS();
  const { asPath } = useRouter();

  const [data, form] = useGithubJsonForm(sharedContentfile);
  usePlugin(form);
  useGithubToolbarPlugins();

  const contributors = file.data.frontmatter.contributors;
  const [activeGroup, activeParent] = useStore((state) => [state.activeGroup, state.activeParent]);
  const group = navItems.find(({ slug }) => activeGroup === slug);
  const parent = resources?.find((r) => r.data.frontmatter.slug === activeParent)?.data.frontmatter;

  return (
    <InlineForm form={form}>
      <BreadCrumbs
        contentType={contentType}
        group={group}
        parent={parent}
        title={file.data.frontmatter.title}
      />
      <ResourceEditor file={file} preview={preview} cms={cms} />
      <Grid gap={4}>
        {relatedResources && relatedResources.length > 0 && (
          <RelatedResources resources={relatedResources} contentType={contentType} />
        )}
        <Feedback route={asPath} cms={cms} mobile={mobile} />
        <ContributeCta file={file} mobile={mobile} />
        {contributors && <Contributors contributors={contributors} mobile={mobile} />}
      </Grid>
    </InlineForm>
  );
}

ListItem = ({ children, index, ordered }) => {
  return ordered ? (
    $(
      Grid,
      { columns: ['64px auto'], gap: 3, sx: { mb: 3 } },
      $(
        Flex,
        {
          sx: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            bg: 'onBackground',
            color: 'primary',
            size: 4,
            borderRadius: 'round',
            fontFamily: 'heading',
            fontSize: 3,
            mx: 'auto',
          },
        },
        $(Text, null, `${index + 1}`)
      ),
      $(
        Text,
        {
          sx: {
            my: 0,
            p: 0,
            '& > p': {
              m: 0,
            },
            '& > ul': {
              mt: 1,
              mb: 0,
            },
          },
        },
        children
      )
    )
  ) : (
    <li>{children}</li>
  );
}

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>
  );
}

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>
  );
}

Feedback = ({ route, cms, mobile }) => {
  const ref = useRef(null);
  const rcRef = useRef(null);

  const [reaction, setReaction] = useState(null);

  const isNegative = reaction === 'negative';
  const isPositive = reaction === 'positive';
  const isSubmitted = reaction === 'submitted';

  const { title, placeholder } = isNegative
    ? {
        title: mobile ? 'sorryMobile' : 'sorry',
        placeholder: 'Please let us know how we can improve it.',
      }
    : isPositive
    ? {
        title: mobile ? 'gladMobile' : 'glad',
        placeholder: 'Please let us know how we can make it even better.',
      }
    : isSubmitted
    ? { title: mobile ? 'thanksMobile' : 'thanks' }
    : { title: mobile ? 'helpfulMobile' : 'helpful' };

  const sendFeedback = useCallback(async () => {
    const markdown = constructMarkdownString(reaction, rcRef.current?.value, ref.current?.value);

    try {
      const response = await fetch(process.env.FEEDBACK_ENDPOINT || '/api/feedback', {
        body: JSON.stringify({
          reaction,
          comment: markdown,
          tags: ['feedback', window.location.pathname],
        }),
        headers: {
          'Content-Type': 'application/json',
        },
        method: 'POST',
        credentials: 'same-origin',
        referrerPolicy: 'no-referrer',
      });

      if (!response.ok) {
        throw Error(response.statusText);
      }

      cms.alerts.success('Your feedback has been submitted');
      setReaction('submitted');
    } catch (err) {
      console.error(err);
      cms.alerts.error('there was an error in submitting your feedback');
    }
  }, [reaction, cms.alerts]);

  useEffect(() => {
    setReaction(null);
  }, [route]);

  return (
    <Card
      sx={{
        bg: 'background',
        border: 'light',
        borderColor: 'muted',
        borderRadius: 'small',
        width: '100%',
      }}
    >
      <Flex sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
        <Flex sx={{ alignItems: 'center' }}>
          <Icon
            sx={{ mr: 2 }}
            color="primary"
            size="auto"
            height="20px"
            width="20px"
            name="document"
          ></Icon>
          <Heading variant="smallHeading">
            <InlineText name={title} />
          </Heading>
        </Flex>
        {isSubmitted ? (
          <Flex
            sx={{
              alignItems: 'center',
              justifyContent: 'center',
              bg: 'primary',
              size: 4,
              borderRadius: 'round',
              ml: 'auto',
            }}
          >
            <Icon name="checkmark" size="3" />
          </Flex>
        ) : (
          <Grid columns={2}>
            <Button
              variant="contrastButtonSmall"
              sx={{
                bg: isPositive ? 'primary' : undefined,
                color: isPositive ? 'onPrimary' : undefined,
                minWidth: 42,
              }}
              onClick={() => setReaction('positive')}
            >
              Yes
            </Button>
            <Button
              variant="contrastButtonSmall"
              sx={{
                bg: isNegative ? 'primary' : undefined,
                color: isNegative ? 'onPrimary' : undefined,
                minWidth: 42,
              }}
              onClick={() => setReaction('negative')}
            >
              No
            </Button>
          </Grid>
        )}
      </Flex>
      {(isNegative || isPositive) && (
        <Flex sx={{ flexDirection: 'column', alignItems: 'flex-start' }}>
          <Text sx={{ fontWeight: 'body', mb: 2, mt: 3 }} variant="caps">
            FEEDBACK
          </Text>
          <Textarea
            aria-label="Feedback textarea"
            ref={ref}
            placeholder={placeholder}
            sx={{
              mb: 2,
              bg: 'surface',
              borderColor: 'muted',
              fontSize: 3,
            }}
          ></Textarea>
          <Text sx={{ fontWeight: 'body', mb: 2, mt: 3 }} variant="caps">
            ROCKET CHAT HANDLE (OPTIONAL)
          </Text>
          <Flex sx={{ justifyContent: 'space-between', width: '100%' }}>
            <Input
              sx={{
                mr: 3,
                fontFamily: 'body',
                fontSize: 3,
                bg: 'surface',
                borderColor: 'muted',
                width: ['66%', '100%'],
              }}
              type="email"
              aria-label="Feedback handle"
              placeholder="Enter your Rocket Chat handle if you would like to be in contact."
              ref={rcRef}
            ></Input>
            <Button
              sx={{ px: [2, 4], width: ['33%', 'initial'] }}
              variant="small"
              onClick={sendFeedback}
            >
              Submit
            </Button>
          </Flex>
          <Flex sx={{ pt: 3, flexWrap: 'wrap' }}>
            <Text sx={{ color: 'onBackgroundMuted', pr: 3 }}>
              <InlineText name="additional" />
            </Text>
            <ThemeLink href={'https://chat.makerdao.com/channel/dev'} target="_blank">
              <Flex sx={{ alignItems: 'center' }}>
                <Icon sx={{ mr: 2 }} color="primary" name="chat"></Icon>
                <Text
                  sx={{
                    color: 'text',
                    cursor: 'pointer',
                    '&:hover': {
                      color: 'primaryEmphasis',
                    },
                  }}
                >
                  chat.makerdao.com
                </Text>
              </Flex>
            </ThemeLink>
          </Flex>
        </Flex>
      )}
    </Card>
  );
}

Contributors = ({ file }) => {
  return (
    <Flex
      sx={{
        py: 3,
        px: 3,
        border: 'light',
        borderColor: 'muted',
        borderRadius: 'small',
        width: '100%',
      }}
    >
      <Icon
        name="edit"
        sx={{ mr: 2, mb: 'auto', pt: 1 }}
        color="primary"
        size="auto"
        height="24px"
        width="24px"
      ></Icon>
      <Flex sx={{ flexDirection: 'column', width: '100%' }}>
        <Heading>
          <InlineText name="edit" />
        </Heading>
        <Heading sx={{ width: '100%', color: 'onBackgroundMuted' }}>
          <InlineText name="editSub" />
        </Heading>
        <Grid columns={[1, '1fr 1fr auto']} sx={{ width: '100%' }}>
          <Flex
            sx={{
              mt: 3,
              flexDirection: 'column',
              alignItems: 'flex-start',
              justifyContent: 'space-between',
            }}
          >
            <Text>
              <InlineTextarea name="editLCol" />
            </Text>
            <Flex sx={{ flexDirection: 'column', pt: 4 }}>
              <EditLink enterText="Edit This Page" sx={{ px: 3 }} />
              <ThemeLink href={`${GITHUB_EDIT_LINK}${file.fileRelativePath}`} target="_blank">
                <Flex sx={{ alignItems: 'center', mt: 2, pl: 3 }}>
                  <Icon sx={{ mr: 2 }} color="primary" name="github"></Icon>
                  <Text
                    sx={{
                      color: 'text',
                      cursor: 'pointer',
                      '&:hover': {
                        color: 'primaryEmphasis',
                      },
                    }}
                  >
                    Edit on Github
                  </Text>
                </Flex>
              </ThemeLink>
            </Flex>
          </Flex>
          <Flex sx={{ mt: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
            <Text>
              <InlineTextarea name="editRCol" />
            </Text>
            <Flex sx={{ flexDirection: 'column', mt: 'auto' }}>
              <Text sx={{ fontWeight: 'bold' }}>Questions?</Text>
              <Text>Ask us in the #dev channel</Text>
              <ThemeLink href={'https://chat.makerdao.com/channel/dev'} target="_blank">
                <Flex sx={{ alignItems: 'center', mt: 2 }}>
                  <Icon sx={{ mr: 2 }} color="primary" name="chat"></Icon>
                  <Text
                    sx={{
                      color: 'text',
                      cursor: 'pointer',
                      '&:hover': {
                        color: 'primaryEmphasis',
                      },
                    }}
                  >
                    chat.makerdao.com
                  </Text>
                </Flex>
              </ThemeLink>
            </Flex>
          </Flex>
          <Icon
            sx={{ transform: 'rotate(45deg)', width: 'auto', ml: 'auto', zIndex: -1 }}
            name="smiley"
            size={6}
          />
        </Grid>
      </Flex>
    </Flex>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

Index = () => {
  const refSearch = useRef(null)
  const [repos, setRepos] = useState(null)
  const [totalResults, setTotalResults] = useState(null)
  const [isFetchingData, setIsFetchingData] = useState(true)
  const [isShowModal, setIsShowModal] = useState(false)
  const [searchState, dispatch] = useReducer(reducer, INITIAL_STATE)
  const previousSearchState = usePrevious({ ...searchState })
  const [colorMode, _setColorMode] = useColorMode()

  useEffect(() => {
    const fetchDataAndSetState = async () => {
      const data = await fetchData(searchState)

      if (data) {
        setRepos(data)
        setTotalResults(data.total_count)
      }

      setIsFetchingData(false)
    }

    // Avoid request while developing
    if (process.env.NODE_ENV === 'development') {
      setRepos(mockRepos)
      setIsFetchingData(false)
      return
    }

    fetchDataAndSetState()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchState])

  const onSearchChange = field => e => {
    if (searchState.page * 30 < totalResults && field === 'pageUp') {
      scrollTo('#wrapper')
      dispatch({ type: field, payload: searchState.page + 1 })
      return
    }

    if (searchState.page > 1 && field === 'pageDown') {
      scrollTo('#wrapper')
      dispatch({ type: field, payload: searchState.page - 1 })
      return
    }
  }

  const onSearchIconClick = async (input, stars, language) => {
    dispatch({ type: 'search', payload: input })
    dispatch({ type: 'sort', payload: stars })
    dispatch({ type: 'filter', payload: language })

    if (
      previousSearchState.term === searchState.term &&
      previousSearchState.sort === searchState.sort &&
      previousSearchState.filter === searchState.filter
    ) {
      return
    }

    setIsFetchingData(true)

    if (isShowModal) {
      setIsShowModal(false)
    }

    const data = await fetchData(searchState)

    if (data) {
      setRepos(data)
      setTotalResults(data.total_count)
    }

    setIsFetchingData(false)
  }

  const toggleModal = () => {
    setIsShowModal(!isShowModal)
  }

  const searchCompProps = {
    searchState,
    onSearchIconClick,
    onSortChange: onSearchChange('sort'),
    onSearchChange: onSearchChange('search'),
    onFilterChange: onSearchChange('filter'),
  }

  return (
    <>
      <Layout
        isShowSearch
        isShowModal={isShowModal}
        toggleModal={toggleModal}
        searchCompProps={searchCompProps}
      >
        <SEO />
        <span id="wrapper" ref={refSearch} />
        {isFetchingData ? (
          <Spinner
            color="rgb(255, 65, 54)"
            sx={{
              top: '50%',
              left: '50%',
              position: 'absolute',
              transform: 'translate(-50%, -50%)',
            }}
          />
        ) : repos.items.length > 0 ? (
          <>
            <Grid columns={[1, 1, 1, 3]}>
              {repos.items.map(repo => (
                <RepoCard key={repo.id} repo={repo} />
              ))}
            </Grid>
            <Pagination
              pageUp={onSearchChange('pageUp')}
              pageDown={onSearchChange('pageDown')}
              currentPage={searchState.page}
              totalResults={totalResults}
            />
          </>
        ) : (
          <Box
            sx={{
              top: '50%',
              left: '50%',
              position: 'absolute',
              transform: 'translate(-50%, -50%)',
            }}
          >
            <Text
              sx={{
                fontSize: 22,
                fontFamily: 'inter',
              }}
            >
              No result found
            </Text>
          </Box>
        )}
      </Layout>
      <Flex id="modal" className={isShowModal ? 'active' : null}>
        <Flex
          p="16px"
          bg={
            colorMode === 'dark'
              ? 'rgba(64,64,64,0.9)'
              : 'rgba(255,255,255,0.7)'
          }
          sx={{
            maxWidth: 660,
            margin: 'auto',
            borderRadius: 6,
            alignItems: 'flex-end',
            flexDirection: 'column',
            '@media only screen and (max-width: 425px)': {
              width: 360,
            },
            '@media only screen and (max-width: 320px)': {
              width: 300,
            },
          }}
        >
          <Search {...searchCompProps} />
          <Button
            mt="8px"
            backgroundColor="rgb(186, 65, 54)"
            onClick={toggleModal}
            sx={{
              fontFamily: 'inter',
            }}
          >
            Close
          </Button>
        </Flex>
      </Flex>
    </>
  )
}

Search = ({
  searchState,
  onSearchChange,
  onSortChange,
  onFilterChange,
  onSearchIconClick,
}) => {
  const [valueInput, setValueInput] = useState('')
  const [valueSelectStars, setValueSelectStars] = useState('')
  const [valueSelectLanguage, setValueSelectLanguage] = useState('')

  return (
    <Grid columns={[1, 2]}>
      <Box
        sx={{
          width: '100%',
          color: 'text',
          fontFamily: 'inter',
          position: 'relative',
        }}
      >
        <Input
          sx={{
            backgroundColor: 'cardBackground',
            color: 'text',
            borderWidth: 1,
            borderStyle: 'solid',
            borderColor: 'cardBorder',
            borderRadius: 8,
            height: 45,
            fontSize: 15,
            pr: '40px',
            '&:focus': {
              outline: 0,
            },
            '@media only screen and (max-width: 320px)': {
              fontSize: 13,
            },
          }}
          value={valueInput}
          onChange={e => setValueInput(e.target.value)}
          onKeyPress={e =>
            e.key === 'Enter'
              ? onSearchIconClick(
                  valueInput,
                  valueSelectStars,
                  valueSelectLanguage
                )
              : {}
          }
          placeholder="Search Covid-19 related repos"
        />

        <SearchIcon
          style={{
            top: 10,
            right: 10,
            width: 22,
            height: 22,
            cursor: 'pointer',
            position: 'absolute',
          }}
          onClick={() =>
            onSearchIconClick(valueInput, valueSelectStars, valueSelectLanguage)
          }
        />

        <Label
          sx={{
            fontSize: 9,
            padding: '0px 3px',
            display: 'block',
            mt: '8px',
            opacity: '0.6',
          }}
        >
          Press Enter when you are done (GitHub API has a rate limit of
          <a
            style={{ cursor: 'pointer', color: 'rgb(255, 65, 54)' }}
            href="https://developer.github.com/v3/search/#rate-limit"
            target="_blank"
            rel="noopener noreferrer"
          >
            <b>&nbsp; 10 requests per minute </b> &nbsp;
          </a>
          if something not working please wait...)
        </Label>
      </Box>
      <Grid
        columns={[2, 2]}
        sx={{
          width: '100%',
          color: 'white',
          fontFamily: 'inter',
        }}
      >
        <Box>
          <Select
            sx={{
              backgroundColor: 'cardBackground',
              color: 'text',
              borderWidth: 1,
              borderStyle: 'solid',
              borderColor: 'cardBorder',
              borderRadius: 8,
              height: 45,
              '& + svg': {
                fill: 'text',
              },
              fontSize: 15,
              '@media only screen and (max-width: 320px)': {
                fontSize: 13,
              },
              '&:focus': {
                outline: 0,
              },
            }}
            value={valueSelectStars}
            onChange={e => setValueSelectStars(e.target.value)}
          >
            <option value="stars">Sort by Stars</option>
            <option value="">Sort by Best Match</option>
            <option value="help-wanted-issues">
              Sort by Help Wanted Issues
            </option>
          </Select>
        </Box>
        <Box>
          <Select
            sx={{
              backgroundColor: 'cardBackground',
              color: 'text',
              borderWidth: 1,
              borderStyle: 'solid',
              borderColor: 'cardBorder',
              borderRadius: 8,
              height: 45,
              '& + svg': {
                fill: 'text',
              },
              fontSize: 15,
              '@media only screen and (max-width: 320px)': {
                fontSize: 13,
              },
              '&:focus': {
                outline: 0,
              },
            }}
            value={valueSelectLanguage}
            onChange={e => setValueSelectLanguage(e.target.value)}
          >
            <option value="">All Languages</option>
            {githubLanguages.map(lang => (
              <option key={lang} value={lang}>
                {lang}
              </option>
            ))}
          </Select>
        </Box>
      </Grid>
    </Grid>
  )
}

RepoCard = ({ repo }) => {
  return (
    <Card
      sx={{
        backgroundColor: 'cardBackground',
        fontFamily: 'inter',
        borderRadius: 8,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: 'cardBorder',
        padding: '15px 15px 25px 20px',
        ':hover': {
          cursor: 'pointer',
        },
      }}
      onClick={() => openGithubPage(repo.html_url)}
    >
      <Box
        sx={{
          paddingBottom: 25,
          height: '80%',
        }}
      >
        <Text sx={{ wordBreak: 'break-all', fontSize: 20, py: '8px' }}>
          {repo.name}
        </Text>
        <Text
          sx={{
            wordBreak: 'break-all',
            fontSize: 16,
            py: '4px',
            color: '#9d1e1e',
          }}
        >
          {repo.full_name}
        </Text>
        <Text
          sx={{ pt: '4px', color: '#805f5f', lineHeight: '20px', fontSize: 14 }}
        >
          {repo.description}
        </Text>
      </Box>
      <Grid
        columns={4}
        sx={{
          borderTop: 'solid 1px rgba(255, 255, 255, 0.05)',
          paddingTop: 15,
          textAlign: 'center',
          fontSize: 14,
        }}
      >
        <Text>
          <span
            role="img"
            aria-label="star"
            style={{ verticalAlign: 'middle' }}
          >
            <StarIcon />
          </span>{' '}
          {repo.stargazers_count}
        </Text>
        <Text>
          <span
            role="img"
            aria-label="issues"
            style={{ verticalAlign: 'middle' }}
          >
            <IssueIcon />
          </span>{' '}
          {repo.open_issues_count}
        </Text>
        <a href={repo.html_url} style={{ color: 'currentColor' }}>
          <Text>
            <span
              role="img"
              aria-label="github"
              style={{ verticalAlign: 'middle' }}
            >
              <GithubIcon />
            </span>{' '}
            Github
          </Text>
        </a>
        {displayLogo()}
      </Grid>
    </Card>
  )

  function displayLogo() {
    //check if logoMapper contains the repo.language as a key
    if (logoMapper[repo.language] !== undefined) {
      return (
        <Text>
          <span
            className="tooltip"
            role="img"
            aria-label="language"
            style={{ verticalAlign: 'middle' }}
          >
            <img
              width="16px"
              height="16px"
              src={logoMapper[repo.language]}
              alt={repo.language}
            />
            {checkNullLang()}
          </span>
        </Text>
      ) //checkNullLang() for tool tip visibility.
    }
    //when either repo.language is null or not in logoMapper just displaying code icon with repo.language with no tooltip
    else {
      return (
        <Text>
          <span
            role="img"
            aria-label="code"
            style={{ verticalAlign: 'middle' }}
          >
            <CodeIcon />
          </span>{' '}
          {repo.language}
        </Text>
      )
    }
  }

  function checkNullLang() {
    if (repo.language !== null)
      return <span className="tooltiptext">{repo.language}</span>
  }
}