Implement /anim/list

src/components/AlbumBox.astro

@@ -2,16 +2,20 @@
 import { Image } from 'astro:assets'
 
 type Props =
-  | { title?: string | null; href: string; image: string; loading?: false }
-  | { title?: string; href?: string; image?: string; loading: true }
+  | { title?: string | null; href: string; image: string; loading?: false; class?: string }
+  | { title?: string; href?: string; image?: string; loading: true; class?: string }
 
 const { props } = Astro
-const { title, href, image, loading = false } = props
+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']}
+  class:list={[
+    'block w-full mt-2.5 rounded-xl bg-dark/85 ',
+    loading ? 'cursor-default' : 'hover:bg-dark group',
+    className
+  ]}
 >
   {
     loading ? (
@@ -39,7 +43,9 @@ const { title, href, image, loading = false } = props
         </div>
       </div>
     ) : (
-      <div class='group-hover:text-hover-link group-hover:underline text-lg font-bold px-1 pb-1 text-center'>{title}</div>
+      <div class='group-hover:text-hover-link group-hover:underline text-lg font-bold px-1 pb-1 text-center'>
+        {title}
+      </div>
     )
   }
 </a>

src/components/letterList/AnimList.astro

@@ -0,0 +1,20 @@
+---
+import AlbumBox from 'components/AlbumBox.astro'
+import prismaClient from 'utils/prisma-client'
+
+interface Props {
+  letter: string
+}
+
+const { letter } = Astro.props
+const anims = await prismaClient.animation.findMany({
+  where: { title: { startsWith: letter } },
+  select: { id: true, title: true }
+})
+---
+
+{
+  anims.map((a) => (
+    <AlbumBox class='!bg-btn-dark !mt-0' title={a.title} href={`/anim/${a.id}`} image={`/anim/${a.id}.png`} />
+  ))
+}

src/pages/anim/list/index.astro

@@ -0,0 +1,35 @@
+---
+import prismaClient from 'utils/prisma-client'
+
+import LetterList from 'layouts/LetterList.astro'
+import AnimList from 'components/letterList/AnimList.astro'
+
+const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRaw`
+  SELECT DISTINCT UPPER(LEFT(animation.title, 1)) AS letter, COUNT(*) AS count
+  FROM Album_Animation, albums, animation
+  WHERE Album_Animation.albumId = albums.id
+  AND Album_Animation.animationId = animation.id
+  AND albums.status = "Show"
+  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-6 gap-1 justify-items-center'>
+          <AnimList letter={l.letter} server:defer>
+            <Fragment slot='fallback'>
+              {Array.from({ length: Number(l.count) }).map(() => (
+                <div class='animate-pulse h-96 rounded-md w-full bg-gray/85' />
+              ))}
+            </Fragment>
+          </AnimList>
+        </div>
+      </div>
+    ))
+  }
+</LetterList>

src/styles/global.css

@@ -7,6 +7,7 @@
   --color-dark: #212529;
   --color-dark-hover: #2b3035;
   --color-gold: #ffdb37;
+  --color-btn-dark: #121212;
   --color-btn-gray: #6c757d;
   --color-btn-disabled: rgba(108, 117, 125, 0.65);
   --color-gray: #3f3f3f;