Looks slider or grid (JS-UI)

import { DisplayTransformers, ModernDisplayWithPageUrl, SDKColsAtSize, SDKGridSpacing } from "@depict-ai/ui";
import { ModernDisplay } from "@depict-ai/utilishared";

/**
 * Renders a grid or slider containing look cards for the looks available for a certain product (provided productId).
 */
export function LooksSliderOrGrid({
  gridSpacing,
  gridOptions,
  market,
  merchant,
  priceFormatting,
  backendLocale,
  title,
  productId,
  columnsAtSize,
  imagePlaceholderAspectRatio,
  displayTransformers,
  class: classValue,
}: {
  gridSpacing?: SDKGridSpacing;
  columnsAtSize?: SDKColsAtSize;
  /**
   * The id of the product to show looks for
   */
  productId: string;
  merchant: string;
  market: string;
  /**
   * The locale to use for the backend requests, a string containing the locale name (for example "en"). Check the dropdown on demo.depict.ai for the available locales.
   */
  backendLocale: string;
  /**
   * Aspect ratio of the placeholder for the main (outfit) image.
   */
  imagePlaceholderAspectRatio?: number | string;
  title?: string;
  class?: string;
  /**
   * Display transformers to apply when fetching looks.
   */
  displayTransformers?: DisplayTransformers<ModernDisplay, ModernDisplayWithPageUrl<ModernDisplay>>;
  /**
   * If provided, will render as grid instead of slider
   */
  gridOptions?: {
    viewMoreButton?: {
      text: string;
      startRows?: number;
      rowsPerClick?: number;
    };
    maxRows?: number;
  };
  /**
   * Price formatting object for formatting the prices in the looks cards.
   */
  priceFormatting: {
    pre_: string;
    post_: string;
    decimal_places_delimiter_: string;
    thousands_delimiter_: string;
    places_after_comma_: number | "auto";
  };
}): HTMLElement;