69 lines
3.2 KiB
TypeScript
69 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import * as Card from "~/components/ui/card";
|
|
import { useTimeLine } from "../../_providers/GsapProvicer";
|
|
import AnimatedPageTitle from "../../_components/Animated/AnimatedPageTitle";
|
|
import AnimateTextIn from "../../_components/Animated/AnimateIn";
|
|
import { ScrollArea } from "~/components/ui/scroll-area";
|
|
import AnimatePopUp from "../../_components/Animated/AnimatePopUp";
|
|
import AudioPlayer from "./AudioPlayer";
|
|
import type { RouterOutputs } from "~/server/routers/_app";
|
|
|
|
export default function MusicPage(props: {
|
|
tracks: RouterOutputs['music']['list'],
|
|
}) {
|
|
const { tracks } = props;
|
|
useTimeLine(tracks)
|
|
return (
|
|
<ScrollArea className="px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
|
|
<AnimatedPageTitle position={0}><span>Just Some </span> <span>Music I Made</span> </AnimatedPageTitle>
|
|
<div className="flex flex-wrap h-fit content-center">
|
|
<AnimateTextIn once className="flex flex-wrap mr-[1em]" position={0.5}>
|
|
<div><p className="break-after-avoid mr-[1em]">All works on this page are licensed under:</p></div>
|
|
<div><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div>
|
|
</AnimateTextIn>
|
|
<AnimatePopUp duration={1} ease='elastic.inOut' position={2} once className="items-center content-center">
|
|
<div className="flex flex-row">
|
|
<img className="max-w-[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>
|
|
</AnimatePopUp>
|
|
</div>
|
|
<div className="pt-10" />
|
|
{tracks && tracks.map((track, i) => (
|
|
<div key={track.id}>
|
|
<Card.AnimatedCard position={i + 1}>
|
|
<Card.CardHeader>
|
|
<AnimateTextIn once 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 && (
|
|
<AnimatePopUp once position={i + 1.25} duration={2}>
|
|
<p className="text-sm text-muted-foreground">{track.description}</p>
|
|
</AnimatePopUp>
|
|
)}
|
|
<AnimatePopUp duration={2} ease='elastic.inOut' position={i + 1.3} once>
|
|
<AudioPlayer
|
|
id={track.id}
|
|
src={track.streamUrl ?? track.fileUrl}
|
|
downloadUrl={track.fileUrl}
|
|
downloadName={track.fileName}
|
|
/>
|
|
</AnimatePopUp>
|
|
</Card.CardContent>
|
|
</Card.AnimatedCard>
|
|
<div className="pt-5" />
|
|
</div>
|
|
))}
|
|
{!tracks?.length &&
|
|
<div className="flex justify-center items-center text-muted-foreground">
|
|
No music yet.
|
|
</div>}
|
|
</ScrollArea>
|
|
);
|
|
}
|