related-products.tsx

import { Await, useLoaderData } from "@remix-run/react";
import type {
  HydrogenComponentProps,
  HydrogenComponentSchema,
} from "@weaverse/hydrogen";
import { Suspense, forwardRef } from "react";

import type { ProductCardFragment } from "storefrontapi.generated";
import { ProductSwimlane, Skeleton } from "~/modules";

interface RelatedProductsProps extends HydrogenComponentProps {
  heading: string;
  productsCount: number;
}

let RelatedProducts = forwardRef<HTMLElement, RelatedProductsProps>(
  (props, ref) => {
    let { recommended } = useLoaderData<{
      recommended: { nodes: ProductCardFragment[] };
    }>();
    let { heading, productsCount, ...rest } = props;
    if (recommended) {
      return (
        <section ref={ref} {...rest}>
          <Suspense fallback={<Skeleton className="h-32" />}>
            <Await
              errorElement="There was a problem loading related products"
              resolve={recommended}
            >
              {(products) => (
                <ProductSwimlane
                  title={heading}
                  count={productsCount}
                  products={products}
                />
              )}
            </Await>
          </Suspense>
        </section>
      );
    }
    return <section ref={ref} {...rest} />;
  },
);

export default RelatedProducts;

export let schema: HydrogenComponentSchema = {
  type: "related-products",
  title: "Related products",
  limit: 1,
  enabledOn: {
    pages: ["PRODUCT"],
  },
  inspector: [
    {
      group: "Related products",
      inputs: [
        {
          type: "text",
          name: "heading",
          label: "Heading",
          defaultValue: "You may also like",
          placeholder: "Related products",
        },
        {
          type: "range",
          name: "productsCount",
          label: "Number of products",
          defaultValue: 12,
          configs: {
            min: 1,
            max: 12,
            step: 1,
          },
        },
      ],
    },
  ],
};