mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 18:45:41 +00:00
Refactored SpotifyPlayer
This commit is contained in:
parent
33396fddfb
commit
2e0364444b
@ -85,12 +85,33 @@ function usePlayerState(path, options) {
|
||||
}
|
||||
}
|
||||
|
||||
function Song({artist, title, songUrl, album, albumImageUrl, isPlaying}) {
|
||||
function Song({as: Component = 'div', artist, title, songUrl, album, albumImageUrl, isPlaying}) {
|
||||
return (
|
||||
<div className="flex items-center space-x-4">
|
||||
<Component
|
||||
className="flex items-center space-x-4">
|
||||
{isPlaying &&
|
||||
<AnimatedBars/>
|
||||
}
|
||||
<Song.Album
|
||||
album={album}
|
||||
albumImageUrl={albumImageUrl}
|
||||
/>
|
||||
<div>
|
||||
<Song.Title
|
||||
title={title}
|
||||
songUrl={songUrl}
|
||||
className={isPlaying
|
||||
? 'dark:text-green-950'
|
||||
: 'dark:text-zinc-100'}
|
||||
/>
|
||||
<Song.Artist artist={artist}/>
|
||||
</div>
|
||||
</Component>
|
||||
)
|
||||
}
|
||||
|
||||
Song.Album = function SongAlbum({album, albumImageUrl}) {
|
||||
return (
|
||||
<Image
|
||||
width="64"
|
||||
height="64"
|
||||
@ -98,21 +119,30 @@ function Song({artist, title, songUrl, album, albumImageUrl, isPlaying}) {
|
||||
src={albumImageUrl}
|
||||
className="aspect-square rounded-2xl object-cover"
|
||||
/>
|
||||
<div>
|
||||
<h2 className={clsx(isPlaying ? 'dark:text-green-950' : 'dark:text-zinc-100', 'text-sm font-semibold text-zinc-800')}>
|
||||
<Link href={songUrl}>
|
||||
{title}
|
||||
</Link>
|
||||
</h2>
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-400 line-clamp-1 lg:line-clamp-none">{artist}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SongSkeleton() {
|
||||
Song.Title = function SongTitle({as: Component = 'h2', title, songUrl, className}) {
|
||||
return (
|
||||
<div className="flex items-center space-x-4 animate-pulse">
|
||||
<Component className={clsx(className, 'text-sm font-semibold text-zinc-800')}>
|
||||
<Link href={songUrl}>
|
||||
{title}
|
||||
</Link>
|
||||
</Component>
|
||||
)
|
||||
}
|
||||
|
||||
Song.Artist = function SongArtist({as: Component = 'p', artist}) {
|
||||
return (
|
||||
<Component className="text-sm text-zinc-600 dark:text-zinc-400 line-clamp-1 lg:line-clamp-none">
|
||||
{artist}
|
||||
</Component>
|
||||
)
|
||||
}
|
||||
|
||||
Song.Skeleton = function SongSkeleton({as: Component = 'div'}) {
|
||||
return (
|
||||
<Component className="flex items-center space-x-4 animate-pulse">
|
||||
<div
|
||||
className="w-[64px] h-[64px] bg-zinc-100 rounded-2xl dark:bg-zinc-900"
|
||||
/>
|
||||
@ -120,7 +150,7 @@ function SongSkeleton() {
|
||||
<p className="w-[128px] h-3 bg-zinc-100 rounded-2xl dark:bg-zinc-900"/>
|
||||
<p className="mt-3 w-[128px] h-3 bg-zinc-100 rounded-2xl dark:bg-zinc-900"/>
|
||||
</div>
|
||||
</div>
|
||||
</Component>
|
||||
)
|
||||
}
|
||||
|
||||
@ -138,7 +168,7 @@ function LastPlayed() {
|
||||
return (
|
||||
<>
|
||||
{isLoading
|
||||
? <SongSkeleton/>
|
||||
? <Song.Skeleton/>
|
||||
: song?.title &&
|
||||
<Song {...song} />
|
||||
}
|
||||
@ -154,7 +184,7 @@ export function SpotifyPlayer() {
|
||||
return (
|
||||
<div className="grid place-items-start">
|
||||
{isLoading
|
||||
? <SongSkeleton/>
|
||||
? <Song.Skeleton/>
|
||||
: song?.isPlaying
|
||||
? <CurrentlyPlaying {...song}/>
|
||||
: <LastPlayed/>
|
||||
|
Loading…
Reference in New Issue
Block a user