A draggable deck of cards reviewed one at a time, with swipe/throw gestures, buttons, keyboard shortcuts and undo — for quick triage like shortlisting destinations or candidates.
"use client";
import CardStack from "@/components/ui/card-stack";
type Destination = { id: string; name: string; country: string; blurb: string };
const destinations: Destination[] = [
{
id: "lisbon",
name: "Lisbon",
country: "Portugal",
blurb: "Pastel facades, hills, and the smell of grilled sardines.",
},
{
id: "kyoto",
name: "Kyoto",
country: "Japan",
blurb: "Temples, bamboo groves, and quiet backstreets.",
},
{
id: "oaxaca",
name: "Oaxaca",
country: "Mexico",
blurb: "Mole, mezcal, and markets that spill into the street.",
},
{
id: "tbilisi",
name: "Tbilisi",
country: "Georgia",
blurb: "Sulfur baths, old balconies, and incredible bread.",
},
];
export default function CardStackDemo() {
return (
<div className="flex w-full items-center justify-center p-10">
<CardStack
items={destinations}
getKey={(item) => item.id}
getLabel={(item) => item.name}
labels={{ left: "Skip", right: "Shortlist" }}
outcomes={{ left: "skipped", right: "shortlisted" }}
label="Destinations"
renderCard={(item) => (
<div className="flex h-full flex-col justify-end gap-1 p-6">
<p className="text-sm text-[var(--text-secondary)]">
{item.country}
</p>
<h3 className="text-xl font-medium">{item.name}</h3>
<p className="text-sm text-[var(--text-secondary)]">{item.blurb}</p>
</div>
)}
/>
</div>
);
}