alex 3
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { api } from "@/utils/api";
|
|
|
|
export default function MusicCard() {
|
|
const musicFetch = api.misc.song.useQuery()
|
|
|
|
if (musicFetch.data) {
|
|
return (
|
|
<Link href="https://last.fm/user/lulawex" target="_blank">
|
|
<div className="bg-white max-w-xs text-black rounded-sm leading-tight">
|
|
<div className="flex items-start p-2">
|
|
<div className="flex-none">
|
|
<Image
|
|
src={musicFetch.data.track.image[3]?.["#text"] ?? ""}
|
|
alt="Cover Art"
|
|
width="50"
|
|
height="50"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col ml-2 pt-1.5">
|
|
<h1>{musicFetch.data.track.name}</h1>
|
|
<p>{musicFetch.data.track.artist["#text"]}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|
|
} |