59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { getPalaceStats, type PalaceStats as PalaceStatsData } from "@/lib/palace-client";
|
|
|
|
export function PalaceStats() {
|
|
const [stats, setStats] = useState<PalaceStatsData | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
void (async () => {
|
|
try {
|
|
const data = await getPalaceStats();
|
|
setStats(data);
|
|
} catch {
|
|
setError("Failed to load palace stats");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
if (loading) return <div style={{ color: "var(--nl-text-secondary)" }}>Loading stats...</div>;
|
|
if (error) return <div style={{ color: "var(--nl-status-error)" }}>{error}</div>;
|
|
if (!stats) return null;
|
|
|
|
const items = [
|
|
{ label: "Wings", value: stats.wings },
|
|
{ label: "Rooms", value: stats.rooms },
|
|
{ label: "Memories", value: stats.memories },
|
|
{ label: "KG Triples", value: stats.kgTriples },
|
|
];
|
|
|
|
return (
|
|
<section className="surface-card" style={{ padding: "var(--nl-space-5)" }}>
|
|
<div style={{ fontWeight: 700, fontSize: "var(--nl-text-lg)", marginBottom: "var(--nl-space-3)" }}>
|
|
Memory Palace
|
|
</div>
|
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))", gap: "var(--nl-space-3)" }}>
|
|
{items.map(({ label, value }) => (
|
|
<div
|
|
key={label}
|
|
style={{
|
|
textAlign: "center",
|
|
padding: "var(--nl-space-3)",
|
|
borderRadius: "var(--nl-radius-md)",
|
|
border: "1px solid var(--nl-border-subtle)",
|
|
}}
|
|
>
|
|
<div style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--nl-accent-primary)" }}>{value}</div>
|
|
<div style={{ fontSize: "0.75rem", color: "var(--nl-text-secondary)" }}>{label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|