Something went wrong. Try again.
version 2 of my website
Something went wrong. Try again.
1.5 kB · 56 lines
TSX
at commit f7462afe
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657import 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 h-full"> <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> );}