@hitachivantara/uikit-react-core/dist/esm/Carousel/CarouselThumbnails.js

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { useClasses } from "./Carousel.styles.js";
import { HvStack } from "../Stack/Stack.js";
import { HvButton } from "../Button/Button.js";
const HvCarouselThumbnails = forwardRef(function HvCarouselThumbnails2(props, ref) {
  const {
    classes: classesProp,
    className,
    page,
    pages,
    width,
    renderThumbnail,
    onThumbnailClick,
    thumbnailProps,
    ...others
  } = props;
  const { classes, cx } = useClasses(classesProp);
  const selectedIndex = page || 0;
  const numSlides = pages;
  return /* @__PURE__ */ jsx("div", { ref, className: cx(classes.panel, className), ...others, children: /* @__PURE__ */ jsx(HvStack, { direction: "row", spacing: "xs", children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsx(
    HvButton,
    {
      icon: true,
      style: { width },
      variant: "secondaryGhost",
      className: cx(classes.thumbnail, {
        [classes.thumbnailSelected]: i === selectedIndex
      }),
      onClick: (event) => onThumbnailClick?.(event, i),
      ...thumbnailProps,
      children: renderThumbnail?.(i)
    },
    `thumbnail-${i}`
  )) }) });
});
export {
  HvCarouselThumbnails
};