react-icons/ri#RiSpotifyFill JavaScript Examples

The following examples show how to use react-icons/ri#RiSpotifyFill. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: SpotifyLikedSongs.jsx    From xetera.dev with MIT License 5 votes vote down vote up 
SpotifyLikedSongs = forwardRef((props, ref) => {
  const res = useStaticQuery(QUERY)

  const tracksList = groupBy(res.liked.tracks.items, item => {
    const added = new Date(item.added_at)
    return `${added.getFullYear()}-${added.getMonth()}-${added.getDate()}`
  })

  return (
    <StackedSection ref={ref} {...props}>
      <Flex gap={2} alignItems="center">
        <SectionHeader>My Liked Songs</SectionHeader>
        <RiSpotifyFill size={20} />
      </Flex>
      <Grid gap={8}>
        {Object.values(tracksList).map((tracks, i) => {
          const date = new Date(tracks[0].added_at)
          const dateHeader = formatDistance(date, new Date(), {
            addSuffix: true,
          })
          return (
            <Flex flexDirection="column" gap={3} key={i}>
              <Flex gap={3} alignItems="center">
                <Box minWidth="25px" h="1px" background="bg.300" />
                <Text
                  textTransform="uppercase"
                  whiteSpace="nowrap"
                  fontSize="xs"
                  fontWeight="medium"
                  letterSpacing="1.5px"
                  color="text.400"
                >
                  {dateHeader}
                </Text>
                <Box width="100%" h="1px" background="bg.300" />
              </Flex>
              <Grid gap={3} transition="all 0.4s">
                {tracks.map(item => (
                  <LikedSong key={item.track.id} track={item.track} />
                ))}
              </Grid>
            </Flex>
          )
        })}
      </Grid>
    </StackedSection>
  )
})
Example #2
Source File: Navbar.jsx    From xetera.dev with MIT License 4 votes vote down vote up 
export default function Navbar() {
  const { theme, setTheme, toggle } = useContext(ThemeProvider)
  const lanyard = useContext(LanyardProvider)

  const nav = (
    <Flex
      as="nav"
      justifyContent="space-between"
      width="100%"
      transition={transition}
      p={3}
      backdropFilter={{ base: "blur(8px); opacity(0.1)", xl: "none" }}
      zIndex={100}
    >
      <Flex justify="flex-start" align="center">
        <Link to="/" aria-label="Go back home">
          <Flex pointerEvents="all" alignItems="center" transition={transition}>
            <Flex
              w={["30px", "32px", "50px"]}
              h={["30px", "32px", "50px"]}
              justifyContent="center"
            >
              {lanyard.spotify ? (
                <LazyImage
                  alt={`${lanyard.spotify.artist} - ${lanyard.spotify.song}`}
                  key={lanyard.spotify.album_art_url}
                  src={lanyard.spotify.album_art_url}
                />
              ) : lanyard.discord_user ? (
                <Box
                  position="relative"
                  w="full"
                  transition="all 0.2s ease-in-out"
                  _hover={{
                    transform: "scale3d(1.1, 1.1, 1.1)",
                  }}
                >
                  <StaticImage
                    src="../../content/assets/xetera.png"
                    quality={100}
                    height={70}
                    width={70}
                  />
                </Box>
              ) : (
                <SkeletonCircle w="full" h="full" />
              )}
            </Flex>
          </Flex>
        </Link>
        {lanyard?.spotify && (
          <Flex
            justify="center"
            h="full"
            direction="column"
            marginInlineStart={2}
          >
            {lanyard.spotify && (
              <Flex align="center" color="text.100">
                <RiSpotifyFill />
                <Text fontSize="xs" mx={2}>
                  {"I'm listening to"}
                </Text>
              </Flex>
            )}
            <Flex align="center">
              <Flex
                display="flex"
                fontSize="sm"
                align="center"
                color="text.300"
              >
                {lanyard?.spotify ? (
                  <>
                    <HiMusicNote />
                    <ChakraLink
                      color="inherit"
                      rel="external noopener"
                      target="_blank"
                      href={`https://open.spotify.com/track/${lanyard.spotify.track_id}`}
                    >
                      <Text
                        fontSize="xs"
                        mx={2}
                        maxWidth={["20ch", "40ch", "100%"]}
                        whiteSpace="nowrap"
                        textOverflow="ellipsis"
                        overflow="hidden"
                      >
                        {lanyard.spotify.artist} - {lanyard.spotify.song}
                      </Text>
                    </ChakraLink>
                  </>
                ) : (
                  <>
                    {/* <Text fontSize="xs" mx={2}>
                      I'm on Discord doing nothing
                    </Text> */}
                  </>
                )}
              </Flex>
            </Flex>
          </Flex>
        )}
      </Flex>
      <Box
        p={2}
        color="text.100"
        onClick={() => setTheme(toggle)}
        cursor="pointer"
        as="button"
        pointerEvents="all"
        aria-label="theme switch"
      >
        {theme === "light" ? (
          <RiMoonLine size={30} />
        ) : (
          <RiSunFoggyLine size={30} />
        )}
      </Box>
    </Flex>
  )
  return <Headroom>{nav}</Headroom>
}