new music card
This commit is contained in:
Alex Frantz
@@ -1,26 +0,0 @@
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link';
|
||||
|
||||
type BlogCardProps = {
|
||||
image: string,
|
||||
name: string,
|
||||
tagline: string,
|
||||
id: number
|
||||
}
|
||||
export default function BlogCard(props: BlogCardProps) {
|
||||
return (
|
||||
<Link href={`/blog/${props.id}`}>
|
||||
<div className="inline-block">
|
||||
<div className="bg-white text-black text-center">
|
||||
<div>
|
||||
<Image src={props.image} width="300" height="300" alt="Blog Cover" />
|
||||
</div>
|
||||
<div className="p-4 divide-y divide-black">
|
||||
<h1 className="font-bold">{props.name}</h1>
|
||||
<p>{props.tagline}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import React, {useState} from 'react';
|
||||
|
||||
type DropdownProps = {
|
||||
name: string,
|
||||
content: React.JSX.Element[]
|
||||
}
|
||||
|
||||
export default function Dropdown(props: DropdownProps) {
|
||||
const [active, setActive] = useState(false)
|
||||
return (
|
||||
<>
|
||||
<div className="relative flex py-5 items-center hover:cursor-pointer" onClick={() => active ? setActive(false) : setActive(true)}>
|
||||
<span className="flex-shrink mx-4 text-gray-400">{props.name}</span>
|
||||
<div className="flex-grow border-t border-gray-400"></div>
|
||||
</div>
|
||||
|
||||
<div className={`${active ? "block" : "hidden"} inline-block`}>
|
||||
{props.content}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -3,28 +3,47 @@ import Link from "next/link";
|
||||
import { api } from "@/utils/api";
|
||||
|
||||
export default function MusicCard() {
|
||||
const musicFetch = api.misc.song.useQuery()
|
||||
const {data: musicData, fetchStatus} = 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 className="text-sm truncate">{musicFetch.data.track.name}</h1>
|
||||
<p>{musicFetch.data.track.artist["#text"]}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="bg-white text-black max-w-fit mx-auto p-4">
|
||||
<h1 className="text-2xl font-bold inline">Listening To</h1>
|
||||
|
||||
{/* link to lastfm */}
|
||||
<Link
|
||||
href="https://last.fm/user/lulawex"
|
||||
target="_blank"
|
||||
className="opacity-75 underline font-bold text-sm ml-2 hover:text-zinc-600"
|
||||
>
|
||||
Powered by Last.fm
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
fetchStatus !== "fetching" ?
|
||||
<div className="space-y-2">
|
||||
{
|
||||
musicData?.track.map((v,k) => {
|
||||
return <div key={k}>
|
||||
<Image
|
||||
src={v.image[0]?.["#text"] ?? "https://storage.thatalex.dev/content/pfp.jpg"}
|
||||
width="50"
|
||||
height="50"
|
||||
alt={`${v.name} Cover Art`}
|
||||
className="inline mr-2"
|
||||
/>
|
||||
<div className="inline-block align-middle">
|
||||
<Link href={v.url} target="_blank">
|
||||
<h1 className="font-bold w-52 truncate hover:underline">{v.name}</h1>
|
||||
</Link>
|
||||
<p className="opacity-75">{v.artist["#text"]}</p>
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
:
|
||||
<p className="font-bold">Hold tight, fetching..</p>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import RootLayout from "@/components/RootLayout";
|
||||
import MusicCard from "@/components/MusicCard";
|
||||
import Link from 'next/link';
|
||||
import { Cli } from "grommet-icons";
|
||||
|
||||
@@ -51,6 +52,10 @@ export default function Home() {
|
||||
</div>
|
||||
|
||||
<hr className="h-px my-2 bg-gray-200 border-0 w-1/2 mx-auto dark:bg-gray-700" />
|
||||
|
||||
<div className="my-4">
|
||||
<MusicCard />
|
||||
</div>
|
||||
</div>
|
||||
</RootLayout>
|
||||
)
|
||||
|
||||
@@ -10,30 +10,34 @@ type ImageListType = {
|
||||
"#text": string
|
||||
}
|
||||
|
||||
type LastTrackType = {
|
||||
type TrackResponseType = {
|
||||
status: number,
|
||||
track: {
|
||||
"@attr": object,
|
||||
"album": {
|
||||
"mbid": string,
|
||||
"#text": string
|
||||
},
|
||||
"artist": {
|
||||
"mbid": string,
|
||||
"#text": string,
|
||||
},
|
||||
"image": ImageListType[],
|
||||
track: LastTrackType[]
|
||||
}
|
||||
|
||||
type LastTrackType = {
|
||||
"@attr": {
|
||||
"nowplaying": string
|
||||
},
|
||||
"album": {
|
||||
"mbid": string,
|
||||
"name": string,
|
||||
"streamable": number,
|
||||
"url": string
|
||||
}
|
||||
"#text": string
|
||||
},
|
||||
"artist": {
|
||||
"mbid": string,
|
||||
"#text": string,
|
||||
},
|
||||
"image": ImageListType[],
|
||||
"mbid": string,
|
||||
"name": string,
|
||||
"streamable": number,
|
||||
"url": string
|
||||
}
|
||||
|
||||
export const miscRouter = createTRPCRouter({
|
||||
song: publicProcedure
|
||||
.query(async () => {
|
||||
const response = await axios.get<LastTrackType>("https://api.thatalex.dev/v3/music/last-track")
|
||||
const response = await axios.get<TrackResponseType>("https://api.thatalex.dev/v3/music/last-track")
|
||||
return response.data
|
||||
}),
|
||||
})
|
||||
Reference in New Issue
Block a user