music and animation system

src/app/admin/music/page.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { trpc } from "~/app/_trpc/Client";
+import * as Card from "~/components/ui/card";
+import UploadMusicForm from "./_components/UploadMusicForm";
+import { CollapsibleForm } from "~/app/_components/Form/Components";
+import { useEffect } from "react";
+
+export default function AdminMusicPage() {
+	const { data: tracks } = trpc.music.list.useQuery();
+	useEffect(() => {console.log(tracks)}, [tracks])
+	return (
+		<div className="w-5/6 lg:w-1/2 flex flex-col gap-3">
+			{tracks && <>
+				{tracks.map((t) => (
+					<Card.Card key={t.id}>
+						<Card.CardContent>
+							<UploadMusicForm entity={t} className="w-full"/>
+						</Card.CardContent>
+					</Card.Card>	
+				))}
+			</>}
+			<CollapsibleForm entityName="Track" form={UploadMusicForm}/>
+		</div>
+	);
+}