pilet-products.tsx

import * as React from "react";
import { PiletApi } from "app-shell";
import { ProductPage } from "./ProductPage";

export function setup(app: PiletApi) {
  const { Extension } = app;
  const BasketInfo = () => <Extension name="basket-info" />;
  const BuyButton = ({ item }) => (
    <Extension name="buy-button" params={{ item }} />
  );
  const Recommendations = ({ item }) => (
    <Extension name="recommendations" params={{ item }} />
  );

  app.registerPage("/products/:name?", ({ history, match }) => (
    <ProductPage
      name={match.params.name || "porsche"}
      history={history}
      BasketInfo={BasketInfo}
      BuyButton={BuyButton}
      Recommendations={Recommendations}
    />
  ));
}