From f4aec30b8fe4ac6aa535d17b11e4bec0f15bc0a9 Mon Sep 17 00:00:00 2001
From: Jorge Vargas <jorgev259@outlook.es>
Date: Mon, 28 Apr 2025 17:52:24 -0600
Subject: [PATCH] Implement studio pages

---
 astro.config.mjs              |  1 -
 src/components/AlbumBox.astro |  4 +--
 src/pages/studio/[slug].astro | 58 +++++++++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/studio/[slug].astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 3c213b5..97d55b2 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -51,7 +51,6 @@ export default defineConfig({
     '/en/[...params]': '/[...params]',
     '/profile': { status: 307, destination: '/maintenance' },
     '/profile/[username]': { status: 307, destination: '/maintenance' },
-    '/studio/[slug]': { status: 307, destination: '/maintenance' },
     '/request': { status: 307, destination: '/maintenance' }
   },
   security: {
diff --git a/src/components/AlbumBox.astro b/src/components/AlbumBox.astro
index 4e5d440..0b56c11 100644
--- a/src/components/AlbumBox.astro
+++ b/src/components/AlbumBox.astro
@@ -12,8 +12,8 @@ const { title, href, image, loading = false, class: className } = props
 <a
   href={href}
   class:list={[
-    'block w-full mt-2.5 rounded-xl bg-dark/85 ',
-    loading ? 'cursor-default' : 'hover:bg-dark group',
+    'block w-full mt-2.5 rounded-xl bg-btn-dark ',
+    loading ? 'cursor-default' : 'hover:bg-gray/85 group',
     className
   ]}
 >
diff --git a/src/pages/studio/[slug].astro b/src/pages/studio/[slug].astro
new file mode 100644
index 0000000..00484e9
--- /dev/null
+++ b/src/pages/studio/[slug].astro
@@ -0,0 +1,58 @@
+---
+import prismaClient from 'utils/prisma-client'
+
+import DefaultSEO from 'components/DefaultSEO.astro'
+import BaseLayout from 'layouts/base.astro'
+import Sidebar from 'components/Sidebar.astro'
+import AlbumBox from 'components/AlbumBox.astro'
+
+const { slug } = Astro.params
+if (!slug) return Astro.redirect('/404')
+
+const studio = await prismaClient.studio.findUnique({
+  where: { slug },
+  select: {
+    name: true,
+    animations: {
+      select: {
+        animation: {
+          select: {
+            albums: {
+              select: { albumId: true, album: { select: { title: true, publishedAt: true } } }
+            }
+          }
+        }
+      }
+    }
+  }
+})
+
+if (!studio) return Astro.redirect('/404')
+
+const albumsMap = new Map<number, { title: string | null; publishedAt: Date }>()
+studio.animations.forEach((a) => {
+  a.animation.albums.forEach(({ albumId, album }) => {
+    albumsMap.set(albumId, album)
+  })
+})
+
+const albums = Array.from(albumsMap.entries())
+  .map(([id, data]) => ({ id, ...data }))
+  .sort((a, b) => a.publishedAt.getTime() - b.publishedAt.getTime())
+  .reverse()
+---
+
+<DefaultSEO />
+<BaseLayout>
+  <div class='flex flex-col md:flex-row flex-1 max-w-[2000px]'>
+    <div class='flex-1 px-5 bg-dark'>
+      <div class='p-2 text-center text-3xl text-white border-white border-b-1 border-t-1'>
+        {studio.name}
+      </div>
+      <div class='grid grid-cols-2 md:grid-cols-4 gap-x-2.5'>
+        {albums.map((a) => <AlbumBox href={`/album/${a.id}`} image={`/album/${a.id}.png`} title={a.title} />)}
+      </div>
+    </div>
+    <Sidebar />
+  </div>
+</BaseLayout>