ChitoWarlock/soc_site-astro
1
0
Fork 0
mirror of https://github.com/jorgev259/soc_site-astro.git synced 2025-06-29 07:57:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement /game/list

Browse source
This commit is contained in:
Jorge Vargas 2025-04-26 22:38:10 -06:00
parent 39c058be6f
commit c80cc79d16
6 changed files with 125 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/albumList/letterSection.astro → src/components/letterList/AlbumList.astro
View file

@ -13,12 +13,10 @@ const albums = await prismaClient.albums.findMany({
})
---
<div class='flex flex-col gap-y-1'>
{
albums.map((a) => (
<a class='text-left' href={`/album/${a.id}`}>
{a.title}
</a>
))
}
</div>
{
albums.map((a) => (
<a class='text-left hover:bg-btn-gray/30 rounded-md p-2' href={`/album/${a.id}`}>
{a.title}
</a>
))
}

21
src/components/letterList/GameList.astro Normal file
View file

@ -0,0 +1,21 @@
---
import prismaClient from 'utils/prisma-client'
interface Props {
letter: string
}
const { letter } = Astro.props
const games = await prismaClient.game.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={`/game/${a.slug}`}>
{a.name}
</a>
))
}

37
src/layouts/LetterList.astro Normal file
View file

@ -0,0 +1,37 @@
---
interface Props {
letters: { letter: string; count: BigInt }[]
}
import BaseLayout from 'layouts/base.astro'
import Sidebar from 'components/Sidebar.astro'
import DefaultSEO from 'components/DefaultSEO.astro'
const { letters } = Astro.props
---
<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='flex flex-wrap gap-4 justify-center my-3'>
{
letters.map((l) => (
<div class='bg-btn-gray rounded-md size-14 uppercase font-semibold text-4xl text-white hover:bg-gray-hover'>
<a
href={`#${l.letter}`}
class='flex justify-center items-center size-full hover:no-underline hover:text-white'
>
{l.letter}
</a>
</div>
))
}
</div>
<div class='flex flex-col gap-y-6'>
<slot />
</div>
</div>
<Sidebar />
</div>
</BaseLayout>

76
src/pages/album/list/index.astro
View file

@ -1,59 +1,33 @@
---
import prismaClient from 'utils/prisma-client'
import BaseLayout from 'layouts/base.astro'
import Sidebar from 'components/Sidebar.astro'
import LetterSection from 'components/albumList/letterSection.astro'
import DefaultSEO from 'components/DefaultSEO.astro'
import LetterList from 'layouts/LetterList.astro'
import AlbumList from 'components/letterList/AlbumList.astro'
const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRaw`
SELECT DISTINCT UPPER(LEFT(title, 1)) AS letter, COUNT(*) AS count
FROM albums
WHERE status = 'SHOW'
GROUP BY letter
ORDER BY letter;
`
SELECT DISTINCT UPPER(LEFT(title, 1)) AS letter, COUNT(*) AS count
FROM albums
WHERE status = 'SHOW'
GROUP BY letter
ORDER BY letter;
`
---
<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='flex flex-wrap gap-4 justify-center my-3'>
{
letters.map((l) => (
<div class='bg-btn-gray rounded-md size-14 uppercase font-semibold text-4xl text-white hover:bg-gray-hover'>
<a
href={`#${l.letter}`}
class='flex justify-center items-center size-full hover:no-underline hover:text-white'
>
{l.letter}
</a>
</div>
))
}
<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='flex flex-col gap-2 py-4'>
<AlbumList letter={l.letter} server:defer>
<Fragment slot='fallback'>
{Array.from({ length: Number(l.count) }).map(() => (
<div class='animate-pulse h-8 w-full bg-gray/85' />
))}
</Fragment>
</AlbumList>
</div>
</div>
<div class='flex flex-col gap-y-6'>
{
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='my-4'>
<LetterSection letter={l.letter} server:defer>
<Fragment slot='fallback'>
<div class='flex flex-col gap-y-2'>
{Array.from({ length: Number(l.count) }).map(() => (
<div class='animate-pulse h-3.5 w-lg bg-gray/85' />
))}
</div>
</Fragment>
</LetterSection>
</div>
</div>
))
}
</div>
</div>
<Sidebar />
</div>
</BaseLayout>
))
}
</LetterList>

35
src/pages/game/list/index.astro Normal file
View file

@ -0,0 +1,35 @@
---
import prismaClient from 'utils/prisma-client'
import LetterList from 'layouts/LetterList.astro'
import GameList from 'components/letterList/GameList.astro'
const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRaw`
SELECT DISTINCT UPPER(LEFT(name, 1)) AS letter, COUNT(*) AS count
FROM Album_Game, albums, game
WHERE Album_Game.albumId = albums.id
AND Album_Game.gameSlug = game.slug
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-3 gap-1'>
<GameList 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>
</GameList>
</div>
</div>
))
}
</LetterList>