Feat: Genre system with per-genre daily puzzles

app/[genre]/page.tsx

@@ -0,0 +1,43 @@
+import Game from '@/components/Game';
+import { getOrCreateDailyPuzzle } from '@/lib/dailyPuzzle';
+import Link from 'next/link';
+import { PrismaClient } from '@prisma/client';
+
+export const dynamic = 'force-dynamic';
+
+const prisma = new PrismaClient();
+
+interface PageProps {
+    params: Promise<{ genre: string }>;
+}
+
+export default async function GenrePage({ params }: PageProps) {
+    const { genre } = await params;
+    const decodedGenre = decodeURIComponent(genre);
+    const dailyPuzzle = await getOrCreateDailyPuzzle(decodedGenre);
+    const genres = await prisma.genre.findMany({ orderBy: { name: 'asc' } });
+
+    return (
+        <>
+            <div style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
+                <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+                    <Link href="/" style={{ color: '#4b5563', textDecoration: 'none' }}>Global</Link>
+                    {genres.map(g => (
+                        <Link
+                            key={g.id}
+                            href={`/${g.name}`}
+                            style={{
+                                fontWeight: g.name === decodedGenre ? 'bold' : 'normal',
+                                textDecoration: g.name === decodedGenre ? 'underline' : 'none',
+                                color: g.name === decodedGenre ? 'black' : '#4b5563'
+                            }}
+                        >
+                            {g.name}
+                        </Link>
+                    ))}
+                </div>
+            </div>
+            <Game dailyPuzzle={dailyPuzzle} genre={decodedGenre} />
+        </>
+    );
+}