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