55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { formatDisplayDate } from "@/lib/dates-client";
|
|
|
|
type Gap = { date: string; reason: string };
|
|
|
|
interface CatchUpCardProps {
|
|
gaps: Gap[];
|
|
onSelectDate: (date: string) => void;
|
|
}
|
|
|
|
const REASON_LABEL: Record<string, string> = {
|
|
empty: "No adventure logged",
|
|
incomplete: "Adventure started but empty",
|
|
no_reflection: "Reflection missing",
|
|
};
|
|
|
|
export function CatchUpCard({ gaps, onSelectDate }: CatchUpCardProps) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
if (gaps.length === 0) return null;
|
|
|
|
return (
|
|
<div className="retro-window mb-4">
|
|
<button
|
|
type="button"
|
|
className="retro-titlebar w-full text-left"
|
|
aria-expanded={open}
|
|
onClick={() => setOpen(!open)}
|
|
>
|
|
Catch up ({gaps.length}) {open ? "▼" : "▶"}
|
|
</button>
|
|
{open && (
|
|
<div className="p-3 space-y-2">
|
|
<p className="text-xs text-[var(--warm-grey)]">
|
|
A few recent days could use a note — no pressure, just pick one if you like.
|
|
</p>
|
|
{gaps.map((g) => (
|
|
<button
|
|
key={g.date}
|
|
type="button"
|
|
className="retro-btn text-xs w-full text-left flex justify-between"
|
|
onClick={() => onSelectDate(g.date)}
|
|
>
|
|
<span>{formatDisplayDate(g.date)}</span>
|
|
<span className="opacity-70">{REASON_LABEL[g.reason] ?? g.reason}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|