Something went wrong. Try again.
version 2 of my website
Something went wrong. Try again.
1.4 kB · 48 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849import clsx from 'clsx';import { useEffect, useState } from "react";import type { TrackResponse } from '../types/lastfm.ts';import { actions } from 'astro:actions';
export default function LastFM() { const [track, setTrack] = useState<TrackResponse | undefined>(); const [loading, setLoading] = useState(true); const [error, setError] = useState(null);
useEffect(() => { actions.getRecentTrack().then((data) => { setTrack(data.data); setLoading(false); }).catch(err => { setError(err.message); setLoading(false); }) }, [])
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> )}