gatsby-plugin-google-analytics#OutboundLink JavaScript Examples

Social = () => {
  return (
    <div className={styles.container}>
      {social.map((x, i) => {
        const Icon = x.icon;

        return (
          <OutboundLink
            href={x.link}
            key={x.title}
            target="_blank"
            rel="noopener noreferrer"
            className={`${x.class} animated fadeIn`}
            style={{ animationDelay: `${i * 0.25 + 0.25}s` }}
          >
            <Icon color="#FFF" size="0.9em" />
            <span className="sr-only">{x.title}</span>
          </OutboundLink>
        );
      })}
    </div>
  );
}

ExternalLink = forwardRef(({ href, children, ...rest }, ref) => {
  const linkExtras = rest["aria-label"]
    ? { "aria-label": rest["aria-label"] }
    : {}
  return (
    <Box as="span" {...rest} ref={ref}>
      <OutboundLink
        rel="external noopener noreferrer"
        target="_blank"
        href={href}
        {...linkExtras}
      >
        {children}
      </OutboundLink>
    </Box>
  )
})

Resume = () => (
  <OutboundLink
    href="/resume.pdf"
    target="_blank"
    rel="noopener noreferrer"
    className="navbar__link navbar__resume btn btn--secondary"
  >
    Resume
  </OutboundLink>
)

ProjectCard = ({ data }) => {
  return (
    <div className="project-card-main-container">
      <Card>
        <Card.Content>
          <Card.Header>{data.title}</Card.Header>
          <Card.Meta>{data.student_name}</Card.Meta>
          <Card.Description>{data.short_description}</Card.Description>
        </Card.Content>
        <Card.Content extra>
          <div className="ui two buttons">
            <OutboundLink
              className="project-card-link"
              href={data.project_url}
              target="_blank"
              rel="noreferrer"
            >
              <Button basic color="green">
                More Details
              </Button>
            </OutboundLink>
            <OutboundLink
              className="project-card-link"
              href={data.code_url}
              target="_blank"
              rel="noreferrer"
            >
              <Button basic color="orange">
                Code Submission
              </Button>
            </OutboundLink>
          </div>
        </Card.Content>
      </Card>
    </div>
  )
}

PaymentButton = ({ app, handle }) => {
  return (
    <OutboundLink
      className={`payment-button button ${app.toLowerCase()}`}
      href={buildURL(app, handle)}
      target="_blank"
    >
      Tip on {app}
    </OutboundLink>
  );
}

Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  return (
    <div className="wrapper">
      <Header siteTitle={data.site.siteMetadata.title} />
      <main>{children}</main>
      <footer>
        <Link to="/">Home</Link> | <Link to="/about">About</Link> |{" "}
        <Link to="/donate">Donate</Link> | <Link to="/signup">Sign up</Link> |{" "}
        <OutboundLink href="https://github.com/noahmanger/pdxtipjar">
          GitHub
        </OutboundLink>
      </footer>
    </div>
  );
}

Resume = () => {
  return (
    <OutboundLink
      href="/resume.pdf"
      target="_blank"
      rel="noopener noreferrer"
      className="navbar__link navbar__resume btn btn--secondary"
    >
      Resume
    </OutboundLink>
  )
}

Resume = () => {
  const data = useStaticQuery(graphql`
    {
      file(relativePath: { eq: "resume/preview.png" }) {
        childImageSharp {
          gatsbyImageData(width: 600, layout: CONSTRAINED)
        }
      }
    }
  `);

  return (
    <section id="resume">
      <Heading icon={IoIosDocument} title="Resume" />

      <div className="grid grid-cols-1 gap-6 md:grid-cols-5 md:gap-8 items-center">
        <div className="col-span-1 md:col-span-2">
          <OutboundLink
            href="https://pillai.xyz/resume-pdf"
            target="_blank"
            rel="noopener noreferrer"
            className="w-full h-64 md:h-48 lg:h-64 bg-black relative flex-center cursor-pointer rounded-lg shadow-lg"
          >
            <FaLink className="absolute" color="#FFF" size="5rem" />
            <GatsbyImage
              alt="Link to Resume PDF"
              className="absolute w-full h-64 md:h-48 lg:h-64 object-cover rounded-lg hover:opacity-50 duration-200"
              imgStyle={{ objectPosition: "top" }}
              image={data.file.childImageSharp.gatsbyImageData}
            />
            <span className="sr-only">Download Resume</span>
          </OutboundLink>
        </div>
        <div className="col-span-1 md:col-span-3">
          <h5 className="text-lg lg:text-xl font-semibold">
            To those HRs out there who need a more organized and minimal version
            of my information, you can download the trusted PDF version here:
          </h5>

          <Button
            className="mt-8"
            icon={IoIosDocument}
            title="Download Resume"
            onClick={() =>
              window.open("https://pillai.xyz/resume-pdf", "_blank")
            }
          />
        </div>
      </div>
    </section>
  );
}

Footer = () => {
  return (
    <FooterWrapper>
      <div className="container container--secondary">
        <Container className="footer__container container--primary">
          <Links className="footer__links">
            <OutboundLink
              href="https://www.instagram.com/bart.code/"
              target="_blank"
              rel="noopener noreferrer"
              className="footer__link"
              title="Instagram"
            >
              <FontAwesomeIcon
                icon={['fab', 'instagram']}
                className="about__icon"
              />
            </OutboundLink>
            <OutboundLink
              href="https://github.com/bartzalewski"
              target="_blank"
              rel="noopener noreferrer"
              className="footer__link"
              title="GitHub"
            >
              <FontAwesomeIcon
                icon={['fab', 'github']}
                className="about__icon"
              />
            </OutboundLink>
            <OutboundLink
              href="https://www.linkedin.com/in/bartzalewski/"
              target="_blank"
              rel="noopener noreferrer"
              className="footer__link"
              title="LinkedIn"
            >
              <FontAwesomeIcon
                icon={['fab', 'linkedin']}
                className="about__icon"
              />
            </OutboundLink>
            <a
              href="mailto:[email protected]"
              className="footer__link"
              title="Email"
            >
              <FontAwesomeIcon icon="envelope" />
            </a>
            <OutboundLink
              href="/resume.pdf"
              target="_blank"
              rel="noopener noreferrer"
              className="footer__link"
              title="Resume"
            >
              <FontAwesomeIcon icon="paperclip" />
            </OutboundLink>
          </Links>
          <Descriptions className="footer__desc section__desc">
            <Description className="footer__copy">
              Copyright {new Date().getFullYear()} &copy; Bart Zalewski
            </Description>
            <Description className="footer__credit">
              Created by{' '}
              <a
                href="https://github.com/bartzalewski/bartzalewski.com-v2"
                target="_blank"
                rel="noopener noreferrer"
                title="Bart Zalewski | Full-Stack Developer"
              >
                Bart Zalewski
              </a>
            </Description>
          </Descriptions>
        </Container>
      </div>
    </FooterWrapper>
  )
}

ShareButtons = () => {
  return (
    <>
      <OutboundLink
        className="resp-sharing-button__link"
        href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcoronakartan.se"
        target="_blank"
        rel="noopener"
        aria-label="Dela på Facebook"
      >
        <div className="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large">
          <div
            aria-hidden="true"
            className="resp-sharing-button__icon resp-sharing-button__icon--solid"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z" />
            </svg>
          </div>
          Dela sidan
        </div>
      </OutboundLink>

      <OutboundLink
        className="resp-sharing-button__link"
        href="https://twitter.com/intent/tweet?text=Följ%20coronaviruset%20i%20Sverige%20på%20Coronakartan%20www.coronakartan.se%20%23covid19%20%23coronaviruset"
        target="_blank"
        rel="noopener"
        aria-label="Dela på Twitter"
      >
        <div className="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--large">
          <div
            aria-hidden="true"
            class="resp-sharing-button__icon resp-sharing-button__icon--solid"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z" />
            </svg>
          </div>
          Twittra
        </div>
      </OutboundLink>
    </>
  )
}

Blog = () => {
  const data = useStaticQuery(graphql`
    {
      allDevArticles(
        sort: { fields: [article___published_at], order: DESC }
        limit: 6
      ) {
        edges {
          node {
            id
            article {
              url
              tags
              title
              description
              published_at(fromNow: true)
              positive_reactions_count
            }
            featuredImg {
              childImageSharp {
                gatsbyImageData(width: 400, layout: CONSTRAINED)
              }
            }
          }
        }
      }
    }
  `);

  return (
    <section id="blog">
      <Heading icon={IoIosJournal} title="Blog" />

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 grid-rows-2 gap-10">
        {data.allDevArticles.edges.map(({ node }, index) => (
          <div
            key={node.id}
            className="wow fadeIn"
            style={{
              animationDelay: `${index * 200 + 200}ms`,
            }}
          >
            <OutboundLink
              href={node.article.url}
              target="_blank"
              rel="noopener noreferrer"
              className="w-full h-48 bg-black relative flex-center cursor-pointer rounded-lg shadow-lg"
            >
              <FaLink className="absolute" color="#FFF" size="5rem" />
              <GatsbyImage
                className="absolute w-full h-full object-cover rounded-lg hover:opacity-50 duration-200"
                alt={node.article.title}
                image={node.featuredImg.childImageSharp.gatsbyImageData}
              />
              <span className="sr-only">{node.article.title}</span>
            </OutboundLink>
            <h5 className="mt-4 w-5/6 truncate font-semibold">
              {node.article.title}
            </h5>
            <h6 className="text-xs">
              {node.article.published_at} /{" "}
              {node.article.positive_reactions_count} reactions
            </h6>
            <p className="mt-4 text-sm">{node.article.description}</p>

            <p className="pb-0 flex text-xs font-semibold">
              {node.article.tags.map(x => (
                <span key={x} className="mr-2">
                  #{x}
                </span>
              ))}
            </p>
          </div>
        ))}
      </div>

      <Button
        className="mt-12"
        icon={FaDev}
        title="Articles on DEV.to"
        onClick={() => window.open("https://pillai.xyz/dev", "_blank")}
      />
    </section>
  );
}

Projects = () => {
  const data = useStaticQuery(graphql`
    {
      allProjectsJson {
        edges {
          node {
            id
            title
            description
            tags
            website
            github
            image {
              childImageSharp {
                gatsbyImageData(width: 400, layout: CONSTRAINED)
              }
            }
          }
        }
      }
    }
  `);

  return (
    <section id="projects">
      <Heading icon={FaDev} title="Projects" />

      <div className={styles.container}>
        {data.allProjectsJson.edges.map(({ node }, index) => (
          <div
            key={node.id}
            className={`${styles.project} wow fadeIn`}
            style={{
              animationDelay: `${index * 300 + 300}ms`,
            }}
          >
            <OutboundLink
              href={node.website || node.github}
              target="_blank"
              rel="noopener noreferrer"
              className="w-full h-48 bg-black relative flex-center cursor-pointer rounded-lg shadow-lg"
            >
              <FaLink className="absolute" color="#FFF" size="5rem" />
              <GatsbyImage
                alt={node.title}
                className="absolute w-full h-full object-cover rounded-lg hover:opacity-50 duration-200"
                image={node.image.childImageSharp.gatsbyImageData}
              />
              <span className="sr-only">{node.title}</span>
            </OutboundLink>
            <h5 className="mt-4 font-semibold">{node.title}</h5>
            <p className="mt-2 pb-5 text-sm text-justify">{node.description}</p>

            <p className="pb-2 flex text-xs font-semibold">
              {node.tags.map(x => (
                <span key={x} className="mr-2">
                  #{x}
                </span>
              ))}
            </p>

            <div className="flex mt-2">
              {node.website && (
                <OutboundLink
                  href={node.website}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="px-2 mr-2 hover:text-primary-500"
                >
                  <FaLink />
                  <span className="sr-only">Go to Website</span>
                </OutboundLink>
              )}

              {node.github && (
                <OutboundLink
                  href={node.github}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="px-2 mr-2 hover:text-primary-500"
                >
                  <FaGithub />
                  <span className="sr-only">Go to GitHub Repo</span>
                </OutboundLink>
              )}
            </div>
          </div>
        ))}
      </div>

      <Button
        className="mt-6"
        icon={FaGithub}
        title="Projects on GitHub"
        onClick={() => window.open("https://pillai.xyz/github", "_blank")}
      />
    </section>
  );
}

InfoPage = ({ data }) => {
  return (
    <Layout pageName="om">
      <Container className="main">
        <SEO />
        <Helmet>
          <title>Coronakartan: Coronaviruset i Sverige - Om</title>
          <meta
            name="description"
            content={
              'Denna sida är till för att ge en överblick över det nya coronavirusets spridning i Sverige, på regionnivå. Antal bekräftade fall utgår ifrån officiella siffror ifrån Folkhälsomyndigheten.'
            }
          />
          <link rel="canonical" href="https://www.coronakartan.se/om/" />
        </Helmet>
        <Container type="about" className="container">
          <h2>Om {data.site.siteMetadata.title}</h2>
          <p>
            Denna sida är till för att ge en överblick över coronavirusets
            spridning i Sverige, på regionnivå. Jag som skapat kartan heter{' '}
            <OutboundLink href={'https://twitter.com/utzle'} target={'_blank'}>
              Elin Lütz.
            </OutboundLink>{' '}
            Markeringarna på kartan visar inte exakta städer eller adresser,
            utan är placerade i den stad som utgör regionens säte.{' '}
          </p>
          <br />
          <h2>Vanliga frågor</h2>
          <Dropdown
            title={
              'Varför är siffrorna högre än Folkhälsomyndighetens siffror?'
            }
          >
            <p>
              Folkhälsomyndigheten meddelar antal fall som har inkommit fram
              till klockan 11.30 samma dag. Här tas fall in som rapporteras utav
              regionerna via pressmeddelanden under hela dagen, så siffrorna
              ligger närmare nuläget.
              <br />
              <br />
              Metoden för att samla in siffrorna är att i första hand ta
              regionernas pressmeddelanden som källa. Om regionerna inte
              rapporterar dagens siffror så används Folkhälsomyndighetens
              statistik. Källor till fall som läggs in finns på{' '}
              {<Link to="/tidslinje">tidslinjen</Link>}.
            </p>
          </Dropdown>
          <Dropdown title={'Varför visas inte antal tillfrisknade?'}>
            <p>
              Det finns i nuläget ingen offentlig statistik från regionerna som
              rapporterar hur många utav de som testat positivt som blivit
              friskförklarade i Sverige.
            </p>
          </Dropdown>
          <Dropdown title={'Vad menas med "på sjukhus"?'}>
            <p>
              Antal personer som testat positivt för coronaviruset och är
              inneliggande på sjukhus, inkluderat de personer som får
              intensivvård. Dessa siffror rapporteras varje dag utav de flesta
              regioner och anger nuläget. Ett fåtal regioner delger sina siffror
              för vilka som vårdas på sjukhus varannan eller var tredje dag, så
              en viss eftersläpning kan förekomma.
            </p>
          </Dropdown>
          <br />

          <h2>Data</h2>

          <p>
            Antal bekräftade fall, dödsfall och sjukhusfall i Sverige utgår från
            regionernas och Folkhälsomyndighetens rapportering. Hela datasetet
            kan du se{' '}
            <OutboundLink
              href={
                'https://github.com/elinlutz/gatsby-map/tree/master/src/data/time_series'
              }
              target={'_blank'}
            >
              här
            </OutboundLink>
            .
          </p>
          <p>
            Antal bekräftade fall i världen utgår ifrån Johns Hopkins
            Universitys{' '}
            <OutboundLink
              href={'https://github.com/CSSEGISandData/COVID-19'}
              target={'_blank'}
            >
              dataset
            </OutboundLink>
            . Det är samma siffror som ligger till grund för WHO:s dagliga
            rapporteringar. Siffrorna för världen uppdateras en gång om dagen
            och visar gårdagens antal fall.
          </p>
          <p>
            Befolkningsstatistiken är hämtad från SCB för Sverige och från
            Världsbanken för övriga världen.
          </p>
          <br />

          <h2>Hjälp till</h2>
          <p>
            Har du idéer på förbättringar eller vill hjälpa till i projektet?
            Hör av dig via <a href={'mailto:[email protected]'}>mejl</a>.
            Projektet är byggt i React med Gatsby och Leaflet, repot finns{' '}
            <a
              href={'https://github.com/elinlutz/gatsby-map'}
              target={'_blank'}
            >
              här
            </a>
            .
          </p>
          <br />
          <h2>Om projektet i media</h2>
          <li>
            Di Digital,
            <OutboundLink
              href={
                'https://digital.di.se/artikel/besokarna-strommar-in-till-svenskans-coronakarta'
              }
              target={'_blank'}
            >
              {'  Besökarna strömmar in till svenskans coronakarta'}
            </OutboundLink>
          </li>
          <li>
            Computer Sweden,
            <OutboundLink
              href={
                'https://computersweden.idg.se/2.2683/1.731846/coronakartan'
              }
              target={'_blank'}
            >
              {
                ' Elin är utvecklaren bakom Coronakartan – ”utgår från ett Excelark”'
              }
            </OutboundLink>
          </li>
          <li>
            Ingenjören,
            <OutboundLink
              href={
                'https://www.ingenjoren.se/2020/03/31/hundratusentals-foljer-ingenjorens-coronakarta/'
              }
              target={'_blank'}
            >
              {' Hundratusentals följer ingenjörens Coronakarta'}
            </OutboundLink>
          </li>
          <Container className="share">
            <ShareButtons></ShareButtons>
          </Container>
        </Container>
      </Container>
    </Layout>
  )
}

OrgInfo = ({ data }) => {
  const years = Object.keys(data.years)
    .map(year => {
      return (
        <OutboundLink
          href={data.years[year].projects_url}
          rel="noreferrer"
          target="_blank"
        >
          <span className="org-info-year">{year}</span>
        </OutboundLink>
      )
    })
    .reverse()

  let technologies = data.technologies.map(tech => {
    return <span className="org-info-technology">{tech}</span>
  })

  let topics = data.topics.map(topic => {
    return <span className="org-info-topic">{topic}</span>
  })

  return (
    <div className="org-info-container">
      <div
        className="org-info-logo-container"
        style={{
          backgroundColor: data.image_background_color,
        }}
      >
        <div
          className="org-info-logo"
          style={{
            backgroundImage: `url(${data.image_url})`,
          }}
        ></div>
      </div>
      <div className="org-info-site-container">
        <OutboundLink href={data.url} rel="noreferrer" target="_blank">
          <Button icon labelPosition="left" color="orange">
            <Icon name="world" />
            Visit Site
          </Button>
        </OutboundLink>
      </div>
      <div className="org-info-site-container">
        {data.twitter_url && (
          <Popup
            content="Twitter"
            trigger={
              <OutboundLink
                href={data.twitter_url}
                rel="noreferrer"
                target="_blank"
              >
                <Button icon>
                  <Icon name="twitter" />
                </Button>
              </OutboundLink>
            }
          />
        )}
        {data.mailing_list && (
          <Popup
            content="Mailing List"
            trigger={
              <OutboundLink
                href={data.mailing_list}
                rel="noreferrer"
                target="_blank"
              >
                <Button icon color>
                  <Icon name="envelope outline" />
                </Button>
              </OutboundLink>
            }
          />
        )}
        {data.irc_channel && (
          <Popup
            content="Communication Channel"
            trigger={
              <OutboundLink
                href={data.irc_channel}
                rel="noreferrer"
                target="_blank"
              >
                <Button icon>
                  <Icon name="comment" />
                </Button>
              </OutboundLink>
            }
          />
        )}
        {data.contact_email && (
          <Popup
            content="Contact Email"
            trigger={
              <OutboundLink
                href={data.contact_email}
                rel="noreferrer"
                target="_blank"
              >
                <Button icon>
                  <Icon name="mail" />
                </Button>
              </OutboundLink>
            }
          />
        )}
        {data.blog_url && (
          <Popup
            content="Blog"
            trigger={
              <OutboundLink
                href={data.blog_url}
                rel="noreferrer"
                target="_blank"
              >
                <Button icon>
                  <Icon name="blogger" />
                </Button>
              </OutboundLink>
            }
          />
        )}
      </div>
      <div className="org-info-description-container">{data.description}</div>
      <center>
        <Divider horizontal className="org-info-divider">
          <Header as="h4">Category</Header>
        </Divider>
      </center>
      <div className="org-info-category-container">
        <span>{data.category}</span>
      </div>
      <center>
        <Divider horizontal className="org-info-divider">
          <Header as="h4">Years</Header>
        </Divider>
      </center>
      <div className="org-info-years-container">{years}</div>
      <center>
        <Divider horizontal className="org-info-divider">
          <Header as="h4">Technologies</Header>
        </Divider>
      </center>
      <div className="org-info-technologies-container">{technologies}</div>
      <center>
        <Divider horizontal className="org-info-divider">
          <Header as="h4">Topics</Header>
        </Divider>
      </center>
      <div className="org-info-topics-container">{topics}</div>
    </div>
  )
}

Sidebar = ({ config, showFilters }) => {
  const dispatch = useAppDispatch()

  const {
    filter: { topics, technologies, years, categories },
  } = useStaticQuery(graphql`
    {
      filter {
        topics {
          name
          frequency
        }
        technologies {
          name
          frequency
        }
        years {
          name
          frequency
        }
        categories {
          name
          frequency
        }
      }
    }
  `)

  const clearAllFilters = () => {
    dispatch(clearFilters())
  }

  const filterStyle = () => {
    if (!showFilters) {
      return {
        display: "none",
      }
    }
    return {}
  }

  const getSidebarHeading = () => {
    return showFilters ? (
      <Container>GSoC Organizations</Container>
    ) : (
      <Link to="/">
        <Container>GSoC Organizations</Container>
      </Link>
    )
  }

  return (
    <div className="sidebar-sidebar" style={getSidebarStyles(config)}>
      <div className="sidebar-div">
        <div className="sidebar-logo-description">
          <div className="sidebar-description">{getSidebarHeading()}</div>
        </div>
        <div className="sidebar-content" style={filterStyle()}>
          <div className="sidebar-content-clear-filters">
            <Button size="tiny" basic color="orange" onClick={clearAllFilters}>
              Clear all filters
            </Button>
          </div>
          <Divider className="sidebar-divider" />
          <div className="sidebar-content-filters">
            <Filter name="years" choices={years} sortBy="name" order="desc" />
            <Filter name="categories" choices={categories} sortBy="name" />
            <Filter
              name="technologies"
              choices={technologies}
              sortBy="frequency"
            />
            <Filter
              name="topics"
              choices={topics}
              showDivider={false}
              sortBy="frequency"
            />
          </div>
        </div>
        <div className="sidebar-footer">
          <Divider className="sidebar-divider" />
          <div>
            <center>
              <table>
                <tbody>
                  <tr>
                    <td>
                      <GitHubButton
                        data-size="large"
                        href="https://github.com/nishantwrp/gsoc-organizations"
                        data-icon="octicon-star"
                        data-show-count="true"
                        aria-label="Star nishantwrp/gsoc-organizations-site on GitHub"
                      >
                        Star
                      </GitHubButton>
                    </td>
                    <td>
                      <OutboundLink
                        href="https://api.gsocorganizations.dev/"
                        target="_blank"
                        rel="noreferrer"
                      >
                        <Button
                          className="sidebar-footer-icon-link"
                          icon
                          compact={true}
                        >
                          <Icon name="database"></Icon>
                        </Button>
                      </OutboundLink>
                    </td>
                    <td>
                      <OutboundLink
                        href="https://www.twitter.com/nishantwrp"
                        target="_blank"
                        rel="noreferrer"
                      >
                        <Button
                          className="sidebar-footer-icon-link"
                          icon
                          compact={true}
                        >
                          <Icon name="twitter"></Icon>
                        </Button>
                      </OutboundLink>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div className="sidebar-footer-text-container">
                <span className="sidebar-footer-text">
                  Made with{" "}
                  <span className="sidebar-footer-icon">
                    <Icon name="heart"></Icon>
                  </span>{" "}
                  by{" "}
                  <OutboundLink
                    href="https://www.github.com/nishantwrp"
                    className="sidebar-footer-text"
                    target="_blank"
                    rel="noreferrer"
                  >
                    <u>nishantwrp</u>
                  </OutboundLink>
                </span>
              </div>
            </center>
          </div>
        </div>
      </div>
    </div>
  )
}

Footer = () => {
  return (
    <StyledFooter>
      <div className="container container--secondary">
        <div className="footer__container container--primary">
          <div className="footer__links">
            <OutboundLink
              href="https://www.instagram.com/sieroniekuggy/"
              target="_blank"
              rel="noopener noreferrer"
              className="footer__link"
              title="Instagram"
            >
              <FontAwesomeIcon
                data-sal="fade"
                data-sal-easing="ease"
                icon={["fab", "instagram"]}
                className="about__icon"
              />
            </OutboundLink>
            <OutboundLink
              href="https://www.instagram.com/sieroniekuggyofficial/"
              target="_blank"
              rel="noopener noreferrer"
              className="footer__link"
              title="Facebook"
            >
              <FontAwesomeIcon
                data-sal="fade"
                data-sal-easing="ease"
                icon={["fab", "facebook"]}
                className="about__icon"
              />
            </OutboundLink>
            <OutboundLink
              href="https://github.com/sieroniekuggy"
              target="_blank"
              rel="noopener noreferrer"
              className="footer__link"
              title="GitHub"
            >
              <FontAwesomeIcon
                data-sal="fade"
                data-sal-delay="100"
                data-sal-easing="ease"
                icon={["fab", "github"]}
                className="about__icon"
              />
            </OutboundLink>
            <OutboundLink
              href="https://www.twitter.com/in/sieroniekuggy/"
              target="_blank"
              rel="noopener noreferrer"
              className="footer__link"
              title="LinkedIn"
            >
              <FontAwesomeIcon
                data-sal="fade"
                data-sal-delay="200"
                data-sal-easing="ease"
                icon={["fab", "twitter"]}
                className="about__icon"
              />
            </OutboundLink>
            <a
              href="https://wa.me/8615653242335"
              className="footer__link"
              title="Email"
            >
              <FontAwesomeIcon
                data-sal="fade"
                data-sal-delay="300"
                data-sal-easing="ease"
                icon="envelope"
              />
            </a>
            <OutboundLink
              href="/resume.pdf"
              target="_blank"
              rel="noopener noreferrer"
              className="footer__link"
              title="Resume"
            >
              <FontAwesomeIcon
                data-sal="fade"
                data-sal-delay="400"
                data-sal-easing="ease"
                icon="paperclip"
              />
            </OutboundLink>
          </div>
          <div className="footer__desc section__desc">
            <p
              data-sal="fade"
              data-sal-delay="500"
              data-sal-easing="ease"
              className="footer__copy"
            >
              Copyright {new Date().getFullYear()} &copy; CodeTrojans
            </p>
            <p
              data-sal="fade"
              data-sal-delay="600"
              data-sal-easing="ease"
              className="footer__credit"
            >
              Created by{" "}
              <a
                href="https://tawk.to/codetrojans"
                target="_blank"
                rel="noopener noreferrer"
                title="Silence Ronald | Full-Stack Developer"
              >
                Silence Ronald Kugotsi
              </a>
            </p>
          </div>
        </div>
      </div>
    </StyledFooter>
  )
}