Draw your own waypoint card

useWaypointCard resolves the services, the timing, and the summary sentence, then renders nothing. Reach for it when your design system owns the markup.

import type { Waypoint } from "@mountaya/elements/profile";
import { useWaypointCard } from "@mountaya/elements-react/elements";
import { Fragment } from "react";

export const Refuge = ({ waypoint }: { readonly waypoint: Waypoint }) => {
  const card = useWaypointCard({ waypoint });

  return (
    <dl>
      <dt>Summary</dt>
      <dd>{card.headline}</dd>
      {card.timing.map((row) => (
        <Fragment key={row.label}>
          <dt>{row.label}</dt>
          <dd>{row.value}</dd>
        </Fragment>
      ))}
    </dl>
  );
};

The hook derives over the waypoint you hand it, so a draft and a snapshot answer alike.

Next steps

Show a waypoint card

The rendered half of the same pair.

Hooks

Every headless hook the elements are built on.