68 lines
3.0 KiB
TypeScript
68 lines
3.0 KiB
TypeScript
'use client'
|
|
import { trpc } from "~/app/_trpc/Client";
|
|
import * as Card from "~/components/ui/card";
|
|
import { useTimeLine } from "../_providers/GsapProvicer";
|
|
import AnimatedPageTitle from "../_components/Animated/AnimatedPageTitle";
|
|
import { Spinner } from "~/components/ui/spinner";
|
|
import AnimateTextIn from "../_components/Animated/AnimateIn";
|
|
import { ScrollArea } from "~/components/ui/scroll-area";
|
|
export default function MusicPage() {
|
|
const { data: tracks, isLoading } = trpc.music.list.useQuery();
|
|
const randdata = Array.from({ length: 100 }, (_, i) => ({ id: i, value: Math.floor(Math.random() * 50) }));
|
|
useTimeLine(tracks)
|
|
return (
|
|
<ScrollArea className="w-full h-full max-w-4xl mx-auto px-4 py-8 flex flex-col gap-4">
|
|
<AnimatedPageTitle position={0} text="Just Some Music I Made" />
|
|
<AnimateTextIn position={0.5}>
|
|
<div className="flex flex-col lg:flex-row h-fit content-center">
|
|
<p className="break-after-avoid mr-[1em]">All works on this page are licensed under:</p>
|
|
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>
|
|
<div className="flex flex-row">
|
|
<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" />
|
|
<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" />
|
|
<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" />
|
|
<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
</AnimateTextIn>
|
|
{tracks && tracks.map((track, i) => (
|
|
<Card.AnimatedCard key={track.id} position={i + 1}>
|
|
<Card.CardHeader>
|
|
<AnimateTextIn position={i + 1.2} animation="slide">
|
|
<Card.CardTitle>{track.title}</Card.CardTitle>
|
|
</AnimateTextIn>
|
|
</Card.CardHeader>
|
|
<Card.CardContent className="flex flex-col gap-3">
|
|
{track.description && (
|
|
<p className="text-sm text-muted-foreground gsapant">{track.description}</p>
|
|
)}
|
|
<audio controls className="w-full player" src={track.fileUrl}>
|
|
Your browser does not support the audio element.
|
|
</audio>
|
|
</Card.CardContent>
|
|
</Card.AnimatedCard>
|
|
))}
|
|
{randdata.map((d, i) => (
|
|
<Card.AnimatedCard key={d.id} position={(i + 1) * 0.3}>
|
|
<Card.CardHeader>
|
|
<AnimateTextIn position={(i + 1.5) * 0.3} animation="slide">
|
|
<Card.CardTitle>{d.value}</Card.CardTitle>
|
|
</AnimateTextIn>
|
|
</Card.CardHeader>
|
|
<Card.CardContent className="flex flex-col gap-3">
|
|
{d.value}
|
|
</Card.CardContent>
|
|
</Card.AnimatedCard>
|
|
))}
|
|
{!isLoading && !tracks?.length &&
|
|
<div className="flex justify-center items-center text-muted-foreground">
|
|
No music yet.
|
|
</div>
|
|
}
|
|
{isLoading && <div className="w-full h-full items-center flex flex-row content-center gap-4 justify-center">
|
|
<Spinner /> Loading Tracks
|
|
</div>}
|
|
</ScrollArea>
|
|
);
|
|
}
|