react-feather#GitHub TypeScript Examples

Project = ({ title, description, link, image, linkText, small, priority, github }: ProjectProps): JSX.Element => {
  return (
    <div className={styles.project} key={title}>
      <a href={`https://${link}`} target="_blank" rel="noreferrer" aria-label={title}>
        <div className={cn(styles.background, small && styles.backgroundSmall)}>
          {image && (
            <div className={styles.imageWrapper}>
              <div className={styles.image}>
                <Image src={image} priority={priority} layout="responsive" sizes="(max-width: 700px) 90vw, 700px" />
              </div>
            </div>
          )}
        </div>
      </a>

      <h3 className={styles.title}>{title}</h3>
      <p className={styles.description}>{description}</p>
      <div className={styles.links}>
        {link && (
          <a href={`https://${link}`} className={styles.link}>
            {linkText || `Visit ${link}`}
            <Link2 />
          </a>
        )}
        {github && (
          <>
            <span className={styles.dividerDot}>·</span>
            <a href={`https://${github}`} className={styles.link}>
              View source
              <GitHub />
            </a>
          </>
        )}
      </div>
    </div>
  )
}

export default function SideMenu(): JSX.Element {
  const [open, setOpen] = useState(false)
  const [faqOpen, setfaqOpen] = useState(false)
  const [activeProtocol] = useActiveProtocol()

  function closeBoth() {
    setOpen(!open)
    setfaqOpen(false)
  }

  return (
    <>
      <MobileHeader>
        <RowBetween>
          <BlankInternalLink to="/">
            <RowFixed style={{ gap: '8px' }}>
              <SybilLogo />
              <SybilWorkmark>sybil</SybilWorkmark>
            </RowFixed>
          </BlankInternalLink>
          <ExternalLink href="https://github.com/Uniswap/sybil-list">
            <GitHub size={20} style={{ stroke: 'black' }} />
          </ExternalLink>
        </RowBetween>
      </MobileHeader>
      <Wrapper open={open} onClick={() => !open && setOpen(!open)}>
        <AutoColumn gap="24px">
          <div style={{ padding: '0 1.25rem', height: '28px' }}>
            {!open ? (
              <SybilLogo />
            ) : (
              <RowBetween align="flex-start">
                <RowFixed style={{ gap: '8px' }}>
                  <SybilLogo />
                  <SybilWorkmark>sybil</SybilWorkmark>
                </RowFixed>
                <ButtonBasic
                  onClick={() => closeBoth()}
                  style={{ cursor: 'pointer', backgroundColor: 'rgba(255,255,255,0.4)', color: '#000' }}
                >
                  <ChevronLeft />
                </ButtonBasic>
              </RowBetween>
            )}
          </div>
          <div style={{ padding: '0 1.25rem' }}>
            <Break />
          </div>
          {Object.values(SUPPORTED_PROTOCOLS).map((p) => (
            <BlankInternalLink key={p.id + '-image-id'} to={'/delegates/' + p.id}>
              <HoverRow
                onClick={(e) => {
                  e.stopPropagation()
                  setOpen(false)
                }}
              >
                <div
                  style={{
                    height: '30px',
                    backgroundColor: activeProtocol?.id === p.id ? activeProtocol?.primaryColor : 'transparent',
                    width: '2px',
                  }}
                />

                <div style={{ padding: '0 1.25rem', marginLeft: '-2px' }}>
                  <RowFixed>
                    <WrappedListLogo src={p.logo} color={p.primaryColor} />
                    {open && (
                      <TYPE.mediumHeader fontSize="16px" ml={'12px'} color={p.primaryColor}>
                        {p.name}
                      </TYPE.mediumHeader>
                    )}
                  </RowFixed>
                </div>
              </HoverRow>
            </BlankInternalLink>
          ))}
        </AutoColumn>

        {!faqOpen ? (
          <AutoColumn gap="16px" style={{ justifySelf: 'flex-end', alignItems: 'flex-start', padding: '0 1.25rem' }}>
            <ButtonBasic
              as={ExternalLink}
              href="https://github.com/Uniswap/sybil-list"
              style={{ backgroundColor: 'rgba(255,255,255,0.4)', color: '#000', gap: 12, padding: 0 }}
            >
              <GitHub size={20} />
            </ButtonBasic>
            <ButtonBasic
              onClick={() => setfaqOpen(!faqOpen)}
              href="https://github.com/Uniswap/sybil-list"
              style={{ backgroundColor: 'rgba(255,255,255,0.4)', color: '#000', padding: 0 }}
            >
              <HelpCircle size={20} />
            </ButtonBasic>
            {open && (
              <AutoColumn gap="1rem" style={{ justifySelf: 'flex-start' }}>
                <TYPE.black style={{ lineHeight: '125%', fontWeight: 400, fontSize: '12px', padding: 0 }}>
                  A{' '}
                  <ExternalLink style={{ color: '#ff007a' }} href="https://uniswap.org/">
                    Uniswap
                  </ExternalLink>{' '}
                  Project
                </TYPE.black>
              </AutoColumn>
            )}
          </AutoColumn>
        ) : (
          <RowBetween style={{ padding: '0 1rem' }}>
            <ButtonBasic
              onClick={() => setfaqOpen(!faqOpen)}
              href="https://GitHub.com/Uniswap/sybil-list"
              style={{ backgroundColor: 'rgba(255,255,255,0.4)', color: '#000', gap: 12 }}
            >
              <HelpCircle size={20} />
              <TYPE.black style={{ lineHeight: '125%', fontWeight: 400 }}>Help and Info</TYPE.black>
            </ButtonBasic>
            <ButtonBasic
              onClick={() => setfaqOpen(!faqOpen)}
              style={{ cursor: 'pointer', backgroundColor: 'rgba(255,255,255,0.4)', color: '#000' }}
            >
              <X />
            </ButtonBasic>
          </RowBetween>
        )}

        {faqOpen && (
          <AutoColumn gap="1.5rem" style={{ padding: '0 1.25rem' }}>
            <AutoColumn gap="0.5rem">
              <TYPE.body fontWeight={600}>Why build Sybil?</TYPE.body>
              <TYPE.main>
                We wanted to support various Ethereum governance initiatives and found it hard to find potential
                delegates or no easy way to delegate our vote. Sybil is our contribution to help everyone in the
                ecosystem.
              </TYPE.main>
            </AutoColumn>
            <AutoColumn gap="0.5rem">
              <TYPE.body fontWeight={600}>I don’t have Twitter, can I use Sybil?</TYPE.body>
              <TYPE.main>
                At the moment Sybil is Twitter only, but the architecture allows arbitrary services to act as
                authentication methods. We are planning to add GitHub soon and feel free to suggest others in our&nbsp;
                <ExternalLink href="https://github.com/Uniswap/sybil-interface#adding-protocol-support">
                  repo
                </ExternalLink>
                .
              </TYPE.main>
            </AutoColumn>
            <AutoColumn gap="0.5rem">
              <TYPE.body fontWeight={600}>Is Sybil only for governance?</TYPE.body>
              <TYPE.main>
                Since the mapping of wallets to identities is public, you can easily use it to show identities anywhere.
                In fact, you don’t even have to use Sybil through this interface! Check out the documentation for how to
                set up a similar system.
              </TYPE.main>
            </AutoColumn>
          </AutoColumn>
        )}
      </Wrapper>
    </>
  )
}

export default function SiteFooter() {
    return (
        <footer>
            <Jumbotron fluid className="bg-indigo-100 mb-0 pb-2">
                <Container>
                    <Row>
                        <Col md={6}>
                            <Container>
                                <Row className="justify-content-start">
                                    <Col xs="auto">
                                        <Image src={Logo} width="300" height="60" alt="Zerobase Logo" />
                                    </Col>
                                </Row>
                                <Row>
                                    <Col xs="auto">
                                        <p className="my-3 text-justify">
                                            The Zerobase Foundation is a nonprofit organization whose mission is to
                                            build free, open source public health technology for the good of communities
                                            around the world. Our free, privacy-first contact tracing empowers both
                                            individuals and communities to stop the spread of COVID-19.
                                        </p>
                                    </Col>
                                </Row>
                            </Container>
                        </Col>
                        <Col>
                            <Container>
                                <Row className="justify-content-around">
                                    <Col xs={6}>
                                        <Nav className="flex-column">
                                            <small className="px-3">Information For</small>
                                            <NavLink to="/info/individuals">Individuals</NavLink>
                                            <NavLink to="/info/businesses">Businesses</NavLink>
                                            <NavLink to="/info/communities">Communities</NavLink>
                                            <NavLink to="/info/testingSites">Testing Facilities</NavLink>
                                        </Nav>
                                    </Col>
                                    <Col xs={6}>
                                        <Nav className="flex-column">
                                            <small className="px-3">Zerobase Foundation</small>
                                            <NavLink to="/about">About Us</NavLink>
                                            <NavLink to="/team">Our Team</NavLink>
                                            <Nav.Item>
                                                <Nav.Link href="https://airtable.com/shrnYjRudkIBlXzr9">
                                                    Contact Us
                                                </Nav.Link>
                                            </Nav.Item>
                                            <NavLink to="/policies/terms">Terms</NavLink>
                                            <NavLink to="/policies/privacy">Privacy &amp; Cookies Policy</NavLink>
                                        </Nav>
                                    </Col>
                                </Row>
                            </Container>
                        </Col>
                    </Row>
                    <Row className="mt-3">
                        <Col className="d-flex justify-content-md-start justify-content-center" md={6}>
                            <Nav>
                                <NavLinkIcon
                                    href="https://github.com/zerobase-io"
                                    icon={<GitHub stroke="#066079" size="2em" />}
                                />
                                <NavLinkIcon
                                    href="https://www.instagram.com/zerobase.io"
                                    icon={<Instagram stroke="#066079" size="2em" />}
                                />
                                <NavLinkIcon
                                    href="https://necsi-edu.slack.com/join/shared_invite/zt-cu5215sg-63h4A7uCy~ehDsrfAIJ~_Q"
                                    icon={<Slack stroke="#066079" size="2em" />}
                                />
                                <NavLinkIcon
                                    href="https://www.linkedin.com/company/zerobase/"
                                    icon={<Linkedin stroke="#066079" size="2em" />}
                                />
                                <NavLinkIcon
                                    href="https://www.twitter.com/zerobaseio"
                                    icon={<Twitter stroke="#066079" size="2em" />}
                                />
                            </Nav>
                        </Col>
                        <Col className="d-flex justify-content-md-end justify-content-center" md={6}>
                            <div className="text-right py-2">
                                &copy; 2020{' '}
                                <span>
                                    <Link to="/">Zerobase</Link>.{' '}
                                </span>
                                All rights reserved. v3.0.0
                            </div>
                        </Col>
                    </Row>
                </Container>
            </Jumbotron>
            <Container fluid>
                <Row
                    className="bg-p-dark text-white align-items-center justify-content-md-between justify-content-center text-center"
                    md={2}
                    xs={1}
                >
                    <Col>
                        <p className="my-3">Privacy-First Contact Tracing for Communities</p>
                    </Col>
                    <Col>
                        <p className="my-3">
                            <em>Built for real humans in need by real humans who care.</em>
                        </p>
                    </Col>
                </Row>
            </Container>
        </footer>
    );
}