react-icons/ri#RiGithubFill JavaScript Examples

BlogIndex = ({ data, pageContext }) => {
  const posts = data.allMdx.edges
  return (
    <Layout
      display="flex"
      flexDirection="column"
      maxWidth="1200px"
      margin={["0 auto", null, "5% auto"]}
      gap={{ base: 6, md: 10, lg: 24 }}
    >
      <SEO canonical="/" image={pageContext.ogImage} />
      <Helmet>
        <title>{data.site.siteMetadata.title}</title>
      </Helmet>
      <Bio />
      <LayoutContent
        gridAutoFlow="row"
        gridTemplateColumns={{ base: "1fr", lg: "repeat(3, 1fr)" }}
        gridTemplateAreas={{
          base: `
          "blog"
          "spotify"
        `,
          lg: `
            "blog blog spotify"
          `,
        }}
      >
        <StackedSection gridArea="blog" flex={1}>
          <Flex
            flexFlow="row"
            justifyContent="space-between"
            alignItems="center"
            width="100%"
          >
            <Flex alignItems="center">
              <SectionHeader>{posts.length} Posts</SectionHeader>
              <ExternalLink
                color="text.300"
                ml={2}
                href="/rss.xml"
                aria-label="Go to RSS feed"
              >
                <RiRssFill size={15} /> {/* 16 just doesnt look right */}
              </ExternalLink>
            </Flex>
            <Flex alignItems="center">
              <ExternalLink
                color="text.300"
                fontSize="xs"
                mr={2}
                href="https://github.com/xetera/xetera.dev"
              >
                View the site's code
              </ExternalLink>
              <RiGithubFill size={18} />
            </Flex>
            {/* <PostSwitch /> */}
          </Flex>
          <Grid gap={10}>
            {posts.map(({ node }) => (
              <PostList node={node} key={node.fields.slug} />
            ))}
          </Grid>
        </StackedSection>
        <SpotifyLikedSongs gridArea="spotify" />
      </LayoutContent>
    </Layout>
  )
}

Bio = React.memo(() => {
  const data = useStaticQuery(staticQuery)
  const { isSafari } = useIsSafari()

  const twitter = data.site.siteMetadata.social.twitter
  return (
    <Grid
      gap={8}
      as="section"
      gridTemplateAreas={{
        base: `
        "bio"
        "avatar"
      `,
        lg: "'bio avatar'",
      }}
    >
      <Stack
        lineHeight="200%"
        spacing={4}
        gridArea="bio"
        flex={1}
        maxWidth="42rem"
      >
        <Heading
          fontWeight="black"
          fontSize={{ base: "3xl", lg: "7xl" }}
          color="text.100"
        >
          Hi, I’m Xetera.
        </Heading>
        <Stack spacing={4} fontSize={{ base: "md", lg: "2md" }}>
          <Text>
            I love making ideas come to life with code. I'm a huge fan of
            functional programming and anti-abuse + trust & safety.
          </Text>
          <Text>
            I'm currently really interested in web automation and security. I
            also enjoy design and writing on the side when I can find the time.
          </Text>
          <Employment
            position="a full-stack developer"
            link="https://top.gg"
            job="Top.gg"
          />
          <Text>
            As of{" "}
            <Text as="time" dateTime={data.site.buildtime} color="text.400">
              {data.site.buildTime}
            </Text>{" "}
            I have watched{" "}
            <ExternalLink
              color="brandSecondary"
              href="https://anilist.co/user/Xetera"
            >
              {data.anilist.user.statistics.anime.count} animes
            </ExternalLink>
          </Text>
        </Stack>
        <Stack spacing={4} direction="row">
          <Link
            href="https://github.com/xetera"
            color="unset"
            _hover={{ color: "text.100" }}
            aria-label="github link"
          >
            <RiGithubFill size={28} />
          </Link>
          <Link
            href={`https://twitter.com/${twitter}`}
            color="unset"
            _hover={{ color: "text.100" }}
            aria-label="twitter link"
          >
            <RiTwitterFill size={28} />
          </Link>
        </Stack>
        {isSafari && (
          <>
            <Hr />
            <MotionFlex
              initial={{ opacity: 0, y: 3 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <Flex
                flexFlow="column"
                position="sticky"
                top={6}
                justify="center"
              >
                <Heading
                  as="h4"
                  fontSize="lg"
                  color="text.300"
                  mb={2}
                  alignItems="center"
                  display="flex"
                >
                  <RiSafariLine size={18} />
                  <Box marginInlineStart={2}>Oh no</Box>
                </Heading>
                <Text color="text.400" fontSize="sm">
                  It looks like you're using an outdated browser that can't keep
                  up with web standards. Some functionality on the site might
                  feel a little broken, sorry. ?
                </Text>
              </Flex>
            </MotionFlex>
          </>
        )}
      </Stack>
      <Flex
        gridArea="avatar"
        justifyContent={{ base: "flex-start", lg: "flex-end" }}
      >
        <BioImage />
      </Flex>
    </Grid>
  )
})