Something went wrong. Try again.
version 2 of my website
Something went wrong. Try again.
959 B · 34 lines
TSX
1234567891011121314151617181920212223242526272829303132333435import { useLastFm } from '@/hooks/use-lastfm.ts';import clsx from 'clsx';
export default function LastFM() { const { track, loading, error } = useLastFm();
if (loading) return ( <div className="surface"> <div className='skeleton h-6 w-32 mb-2' /> <div className=' flex gap-3 items-center'> <div className='skeleton size-16 rounded-full' /> <div className='skeleton h-4 w-32' /> </div> </div> ) if (!track) return null; if (error) return null;
return ( <div className="surface"> <h2 className="text-2xl mb-2"> {track.nowplaying ? "Now playing" : "Recently Played"} </h2> <div className="flex gap-3 items-center"> <img src={track.image} className={clsx(track.nowplaying && 'animate-spin [animation-duration:5s]', 'rounded-full')} /> <a href={track.url}> {track.name} by {track.artist} </a> </div> </div> )}