List waypoints without a table

WaypointList is the studio's sidebar list of places. It draws no glyph of its own, so the icon set and the labels stay yours.

import { MountayaElementsProvider } from "@mountaya/elements-react/headless";
import { createUiStore } from "@mountaya/studio";
import { WaypointList } from "@mountaya/studio-react";
import type { WaypointListProps } from "@mountaya/studio-react";
import { StudioProvider } from "@mountaya/studio-react/headless";
import { useState } from "react";

export const Waypoints = ({ waypoints }: Pick<WaypointListProps, "waypoints">) => {
  const [store] = useState(createUiStore);

  return (
    <MountayaElementsProvider client={client}>
      <StudioProvider data={{ store }}>
        <WaypointList
          iconLabel={(icon) => icon ?? "Waypoint"}
          itineraryId={itineraryId}
          label="Waypoints"
          readOnly
          renderIconCircle={() => <span className="waypoint-dot" />}
          waypoints={waypoints}
        />
      </StudioProvider>
    </MountayaElementsProvider>
  );
};

waypoints is the itinerary's own list, as useItinerary(itineraryId) from @mountaya/client-react answers it in data.waypoints.

iconLabel and renderIconCircle are required, because the list refuses to guess how a place is drawn.

Next steps

Show a waypoint card

One place, stated in full.

Studio chrome

Every surface the studio publishes on its own.