Now that the CUI Kit and underlying Dispense SDK models manage the beverage data, it’s time to render the list of beverages on the screen. Currently, the backend provides the beverage name (via the notes field in the beverage graph), and later we will enhance this with UI-specific data such as colors and icons.

Generate the BeverageList Component

Use the kosui CLI to create a new BeverageList component in the model-components project:

kosui component beverage-list

? Which project should the component be created in? model-components
>  NX  Generating @kosdev-code/kos-nx-plugin:kos-component
⠼ CREATE libs/model-components/.kos.json
CREATE libs/model-components/src/components/beverage-list/beverage-list.tsx
CREATE libs/model-components/src/components/beverage-list/index.ts

Update the BeverageList Component

Modify the generated component to accept a list of beverages and render an item for each. For now, we display only the beverage name to verify the integration.

Define Component Props

Update the component to accept an array of BeverageModel objects:

// libs/model-components/src/components/beverage-list/beverage-list.tsx
import type { BeverageModel } from '@training-zero4/training-zero4-models';
interface Props {
  beverages?: BeverageModel[];
}

Render the Beverage Items

Iterate through the list of beverages and render each one using a simple <div> to display the beverage name. (Later, this will be enhanced to include colors, icons, and selection events.)

export const BeverageList: React.FunctionComponent<Props> = kosComponent(
  ({ beverages }) => {
    const items = beverages?.map((beverage) => (
      <div key={beverage.id}>{beverage.data.name}</div>
    ));
    return <BeverageListContainer>{items}</BeverageListContainer>;
  }
);

Integrate the BeverageList into the Main Application

Update the main application view to include the BeverageList component by importing it and passing the beverage data from the CUI Kit:

// apps/training-zero4-ui/src/app/components/main-view/main-view.tsx
import { BaseContainer, BeverageList } from '@training-zero4/model-components';
const NozzleView = kosComponent(() => {
  const { beverages, pour, selections, nav } = kit;
  
  return (
    <NozzleContainer>
      {showBeverages ? (
        <BeverageList beverages={beverages.models} />
      ) : (
        <div>{nav.currentGroup}</div>
      )}
    </NozzleContainer>
  );
});

Result

At this stage, your UI should display a list of beverages as defined in the Brandset, with each beverage’s name rendered from the data provided by the backend.

List of Beverages

Next Steps:

Next, we will create a component to display the brand and reflect its availability.