Narrowing Destination ShortlistFREE

npx shadcn add "https://ui.beste.co/r/travel42"

npx shadcn add "https://ui.beste.co/r-base/travel42"

import { Travel42, travel42Demo } from "@/components/beste/block/travel42";

export default function Page() {
  return <Travel42 {...travel42Demo} />;
}

import { Travel42 } from "@/components/beste/block/travel42";

export default function Page() {
  return (
    <Travel42
      badge={{ label: "Where to" }}
      heading="Watch the list get shorter as you answer"
      description="Every answer strikes the ones that no longer apply."
      shortcuts="numbers"
      questions={[
        {
          name: "pace",
          title: "What is the trip for?",
          choices: [
            // a destination survives this answer when it carries one of these tags
            { value: "quiet", label: "Doing very little", keeps: ["quiet"] },
            { value: "outdoors", label: "Being outside all day", keeps: ["outdoors"] },
          ],
        },
        {
          name: "length",
          title: "How long have you got?",
          choices: [
            { value: "short", label: "A long weekend", keeps: ["short"] },
            { value: "long", label: "A week or more", keeps: ["long"] },
          ],
        },
      ]}
      destinations={[
        {
          name: "Yosemite Valley",
          note: "Granite walls, a river underneath them, and more trail than a week can cover.",
          tags: ["outdoors", "long", "winter"],
          image: {
            src: "https://images.unsplash.com/photo-1506744038136-46273834b3fb",
            alt: "A river running through a valley between granite cliffs at dawn",
          },
          link: { label: "See the Yosemite week", href: "https://beste.co" },
        },
        {
          name: "Lago di Braies",
          note: "A rowing boat, a shoreline path, and nothing else asked of you.",
          tags: ["quiet", "short", "summer"],
          image: {
            src: "https://images.unsplash.com/photo-1501785888041-af3ef285b470",
            alt: "Rowing boats on a green lake below limestone peaks",
          },
          link: { label: "See the Braies weekend", href: "https://beste.co" },
        },
      ]}
      labels={{ submit: "Keep what is left", countSuffix: "still fit" }}
    />
  );
}

type Badge = { label: string };
type ActionLink = { label: string; href: string };
type DestinationImage = { src: string; alt: string };

type FilterQuestion = {
  name: string;
  title: string;
  description?: string;
  choices?: FilterChoice[];
};

type FilterChoice = {
  value: string;
  label: string;
  description?: string;
  keeps?: string[];
};

type Destination = {
  name: string;
  note: string;
  image: DestinationImage;
  tags?: string[];
  link?: ActionLink;
};

type Travel42Labels = {
  previous?: string;
  next?: string;
  submit?: string;
  restart?: string;
  countSuffix?: string;
  shortlistTitle?: string;
  emptyTitle?: string;
  emptyBody?: string;
};