List segments without a table

ReadOnlySegmentList is the studio's own sidebar list, published on its own. Reach for it when a narrow column suits the page better than a grid of columns.

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

export const Segments = ({ segments }: Pick<ReadOnlySegmentListProps, "segments">) => {
  const [store] = useState(createUiStore);

  return (
    <MountayaElementsProvider client={client}>
      <StudioProvider data={{ store }}>
        <ReadOnlySegmentList itineraryId={itineraryId} label="Segments" segments={segments} />
      </StudioProvider>
    </MountayaElementsProvider>
  );
};

segments is the itinerary's own list, as a read hands it back: useItinerary(itineraryId) from @mountaya/client-react answers it as data.segments, in chain order.

Memoize the store with useState(createUiStore), because a fresh instance every render is a different studio on every pass.

Next steps

List an itinerary's segments

The same legs as a table instead.

Studio chrome

Every surface the studio publishes on its own.