alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add radio page

Browse Source
This commit is contained in:
Alex Frantz
2024-04-22 02:03:14 -04:00
parent dd60999e3a
commit 50f793de74
8 changed files with 142 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/links.tsx
+39 -7
View File
@@ -2,25 +2,57 @@ import RootLayout from "@/components/RootLayout";
import Footer from "@/components/footer";
import Header from "@/components/header";
import Link from "next/link";
import {useState} from 'react';
// icons
import {
Twitter,
MailOption
} from 'grommet-icons'
export default function LinksPage() {
const [icon, setIcon] = useState<Element | null>();
return (
<RootLayout>
<Header isNotHomePage={true} />
<div className="text-green-500 text-center">
<h1 className="font-bold text-3xl">My Links!</h1>
<div className="space-y-2">
<Link href="https://twitter.com/avvex__" target="_blank">
<div className="text-green-500 max-h-96">
<h1 className="font-bold text-3xl ml-2">My Links!</h1>
<div className="space-y-2 float-left">
<Link
href="https://twitter.com/avvex__"
target="_blank"
onMouseOver={() => {
setIcon(<Twitter size="large" />)
}}
onMouseLeave={() => {
setIcon(null)
}}
>
<div className="hover:bg-green-500 hover:text-black">
<h1 className="text-2xl mx-32">Twitter</h1>
<h1 className="text-2xl mr-32 ml-2">Twitter</h1>
</div>
</Link>
<Link href="https://mast.thatalex.dev/@alex" target="_blank">
<Link
href="https://mast.thatalex.dev/@alex"
target="_blank"
onMouseOver={() => {
setIcon(<MailOption size="large" />)
}}
onMouseLeave={() => {
setIcon(null)
}}
>
<div className="hover:bg-green-500 hover:text-black">
<h1 className="text-2xl mx-32">Mastodon</h1>
<h1 className="text-2xl mr-32 ml-2">Mastodon</h1>
</div>
</Link>
</div>
<div className="float-right">
{/* <Twitter size='xlarge' className="mr-24" /> */}
{icon}
</div>
</div>
<Footer />
</RootLayout>
src/pages/radio.tsx
+47
View File
@@ -0,0 +1,47 @@
import RootLayout from "@/components/RootLayout";
import Footer from "@/components/footer";
import Header from "@/components/header";
import { api } from "@/utils/api";
// next components
import Link from 'next/link';
import Image from "next/image";
export default function MusicPage() {
const { data: musicData, fetchStatus} = api.misc.song.useQuery();
return (
<RootLayout>
<Header isNotHomePage={true} />
<div className="text-green-500 flicker max-w-1/2">
<div className="float-left">
{
fetchStatus === "idle" ?
musicData?.data.tracks.map((v,k) => {
return <div key={k}>
<div className={`text-lg ${k === 0 ? "bg-green-500 text-black" : "hover:bg-green-500 hover:text-black"}`}>
<Link href={v.url} target="_blank">
<h1 className="ml-2 mr-36 truncate max-w-10">{k === 0 && "■"} {v.name}</h1>
</Link>
</div>
</div>
})
: <h1 className="font-bold text-green-500">Fetching..</h1>
}
</div>
<div className="float-right">
{
fetchStatus === "idle" &&
<Image
src={musicData?.data.tracks[0]?.image[2]?.["#text"] ?? "https://storage.thatalex.dev"}
alt="Cover Art"
width="160"
height="160"
/>
}
</div>
</div>
<Footer />
</RootLayout>
)
}