`src/app/drops/archive/page.tsx`

62 lines
import Link from "next/link";
import { query } from "@/lib/db";

export const metadata = {
  title: "Archive",
  description: "Every published issue of Drops. Teased for free readers, full text for subscribers.",
};

export const dynamic = "force-dynamic";

export default async function ArchivePage() {
  const { rows } = await query<{
    id: number; drop_date: string; subject: string; intro: string | null; items: string;
  }>(
    `SELECT d.id, d.drop_date, d.subject, d.intro,
            (SELECT COUNT(*)::text FROM drop_items WHERE drop_id = d.id) AS items
     FROM drops d
     WHERE d.status IN ('published','sent')
     ORDER BY d.drop_date DESC
     LIMIT 180`
  );

  return (
    <article className="mx-auto max-w-3xl">
      <div className="card p-6 mb-4">
        <div className="text-xs uppercase tracking-widest text-brass">Archive</div>
        <h1 className="mt-2 text-3xl font-semibold">Every Drop, in chronological order.</h1>
        <p className="mt-2 text-sm text-ink/70">
          Free readers see subjects + a sample item per issue. Subscribers see the full text — past and present — from their portal.
        </p>
      </div>

      {rows.length === 0 ? (
        <div className="card p-6 text-ink/60">No drops yet. First drop lands at 9am PT.</div>
      ) : (
        <ul className="space-y-3">
          {rows.map((d) => {
            const date = new Date(d.drop_date);
            return (
              <li key={d.id}>
                <Link href={`/drops/archive/${d.id}`} className="card block p-5 hover:bg-brass/5 transition-colors">
                  <div className="text-xs uppercase tracking-wide text-brass">
                    {date.toLocaleDateString(undefined, { weekday: "long", month: "long", day: "numeric", year: "numeric" })}
                  </div>
                  <h2 className="mt-1 text-xl font-semibold">{d.subject}</h2>
                  {d.intro && <p className="mt-1 text-sm italic text-ink/70">{d.intro}</p>}
                  <div className="mt-2 text-xs text-ink/50">{d.items} items</div>
                </Link>
              </li>
            );
          })}
        </ul>
      )}

      <div className="mt-8 card p-6 text-center">
        <p className="text-sm text-ink/70">Want the full text of every drop, past and future?</p>
        <Link href="/drops" className="btn mt-3">Start free trial</Link>
      </div>
    </article>
  );
}