58 lines
1.9 KiB
TypeScript
Executable File
58 lines
1.9 KiB
TypeScript
Executable File
"use client";
|
|
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { AppShell } from "@/components/layout/app-shell";
|
|
|
|
export default function YearlyPage() {
|
|
const year = new Date().getFullYear();
|
|
|
|
const { data: overview } = useQuery({
|
|
queryKey: ["stats", "overview"],
|
|
queryFn: async () => {
|
|
const res = await fetch("/api/stats/overview");
|
|
return res.json();
|
|
},
|
|
});
|
|
|
|
const { data: achievements } = useQuery({
|
|
queryKey: ["achievements"],
|
|
queryFn: async () => {
|
|
const res = await fetch("/api/achievements");
|
|
return res.json();
|
|
},
|
|
});
|
|
|
|
return (
|
|
<AppShell>
|
|
<div className="p-4 pb-20 md:pb-4 parchment-bg min-h-full">
|
|
<div className="max-w-2xl mx-auto text-center py-12">
|
|
<p className="text-sm text-[var(--warm-grey)] mb-2">{year}</p>
|
|
<h1 className="serif text-4xl font-bold mb-6">Your Year in Adventure</h1>
|
|
|
|
<div className="retro-window p-8 text-left space-y-6">
|
|
<ScrollSection title="Total XP" value={overview?.totalXp?.toLocaleString() ?? "—"} />
|
|
<ScrollSection title="Books Completed" value={overview?.booksCompleted ?? "—"} />
|
|
<ScrollSection title="Pages Read" value={overview?.totalPagesRead?.toLocaleString() ?? "—"} />
|
|
<ScrollSection
|
|
title="Achievements Unlocked"
|
|
value={achievements?.unlocked?.length ?? 0}
|
|
/>
|
|
<p className="serif text-center pt-6 border-t italic">
|
|
Another year on the long road. The adventure continues.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppShell>
|
|
);
|
|
}
|
|
|
|
function ScrollSection({ title, value }: { title: string; value: string | number }) {
|
|
return (
|
|
<div className="flex justify-between items-baseline border-b border-[var(--parchment-dark)] pb-3">
|
|
<span className="font-bold">{title}</span>
|
|
<span className="text-2xl text-[var(--gold-trim)]">{value}</span>
|
|
</div>
|
|
);
|
|
}
|