From 3b1cd9089532bad79b213d83b531c7dde9708393 Mon Sep 17 00:00:00 2001
From: Jorge Vargas <jorgev259@outlook.es>
Date: Sun, 27 Apr 2025 11:50:25 -0600
Subject: [PATCH] Implement /studio/list

---
 astro.config.mjs                           |  1 -
 src/components/letterList/StudioList.astro | 21 +++++++++++++
 src/pages/studio/list/index.astro          | 35 ++++++++++++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/components/letterList/StudioList.astro
 create mode 100644 src/pages/studio/list/index.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index f9f5b3d..d08dee0 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -56,7 +56,6 @@ export default defineConfig({
     '/profile/[username]': { status: 307, destination: '/maintenance' },
     '/series/[slug]': { status: 307, destination: '/maintenance' },
     '/studio/[slug]': { status: 307, destination: '/maintenance' },
-    '/studio/list': { status: 307, destination: '/maintenance' },
     '/request': { status: 307, destination: '/maintenance' }
   },
   security: {
diff --git a/src/components/letterList/StudioList.astro b/src/components/letterList/StudioList.astro
new file mode 100644
index 0000000..49e6797
--- /dev/null
+++ b/src/components/letterList/StudioList.astro
@@ -0,0 +1,21 @@
+---
+import prismaClient from 'utils/prisma-client'
+
+interface Props {
+  letter: string
+}
+
+const { letter } = Astro.props
+const games = await prismaClient.studio.findMany({
+  where: { name: { startsWith: letter } },
+  select: { slug: true, name: true }
+})
+---
+
+{
+  games.map((a) => (
+    <a class='text-left hover:bg-btn-gray/30 rounded-md p-2' href={`/studio/${a.slug}`}>
+      {a.name}
+    </a>
+  ))
+}
diff --git a/src/pages/studio/list/index.astro b/src/pages/studio/list/index.astro
new file mode 100644
index 0000000..8cb35d4
--- /dev/null
+++ b/src/pages/studio/list/index.astro
@@ -0,0 +1,35 @@
+---
+import prismaClient from 'utils/prisma-client'
+
+import LetterList from 'layouts/LetterList.astro'
+import GameList from 'components/letterList/GameList.astro'
+import PublisherList from 'components/letterList/PublisherList.astro'
+
+const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRaw`
+  SELECT DISTINCT UPPER(LEFT(studio.name, 1)) AS letter, COUNT(*) AS count
+  FROM Studio_Animation, studio, animation
+  WHERE Studio_Animation.animationId = animation.id
+  AND Studio_Animation.studioSlug = studio.slug
+  GROUP BY letter
+  ORDER BY letter;
+`
+---
+
+<LetterList letters={letters}>
+  {
+    letters.map((l) => (
+      <div id={l.letter}>
+        <div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
+        <div class='py-4 grid sm:grid-cols-1 md:grid-cols-4 gap-1'>
+          <PublisherList letter={l.letter} server:defer>
+            <Fragment slot='fallback'>
+              {Array.from({ length: Number(l.count) }).map(() => (
+                <div class='animate-pulse h-6 w-full bg-gray/85' />
+              ))}
+            </Fragment>
+          </PublisherList>
+        </div>
+      </div>
+    ))
+  }
+</LetterList>