feat: add journals

app/essays/page.tsx

@@ -2,19 +2,27 @@ export const dynamic = "force-dynamic";
 
 import Link from "next/link";
 import { PageHeader } from "@/components/page-header";
-import { Card, CardContent } from "@/components/ui/card";
 import { prisma } from "@/lib/db";
+import { EssaysGrid } from "./essays-grid";
 
 async function getAllEssays() {
   return prisma.essay.findMany({
     orderBy: [{ group: "asc" }, { order: "asc" }],
-    select: { slug: true, title: true, author: true, year: true, group: true },
+    select: { slug: true, title: true, year: true, group: true },
   });
 }
 
 export default async function EssaysPage() {
   const essays = await getAllEssays();
 
+  const items = essays.map((essay) => ({
+    slug: essay.slug,
+    title: essay.title,
+    year: essay.year,
+    group: essay.group,
+    href: `/essays/${essay.slug}`,
+  }));
+
   return (
     <div className="min-h-screen bg-background">
       <PageHeader>
@@ -30,31 +38,8 @@ export default async function EssaysPage() {
         </p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8">
-        <Card className="divide-y divide-border">
-          <CardContent className="p-0">
-            <ul className="divide-y divide-border">
-              {essays.map((essay) => (
-                <li key={essay.slug}>
-                  <Link
-                    href={`/essays/${essay.slug}`}
-                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-0 hover:bg-muted transition-colors"
-                  >
-                    <div>
-                      <p className="font-medium text-foreground">
-                        {essay.title}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        {essay.author}
-                        {essay.year ? ` · ${essay.year}` : ""}
-                      </p>
-                    </div>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </CardContent>
-        </Card>
+      <main className="max-w-6xl mx-auto px-6 py-8">
+        <EssaysGrid essays={items} />
       </main>
     </div>
   );