analytica-frontend-lib/dist/chunk-6TUOCZ7Y.mjs

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

import {
  cn
} from "./chunk-53ICLDGS.mjs";

// src/components/Whiteboard/Whiteboard.tsx
import { useCallback, useState } from "react";
import { ArrowsOutIcon } from "@phosphor-icons/react/dist/csr/ArrowsOut";
import { jsx, jsxs } from "react/jsx-runtime";
var IMAGE_WIDTH = 225;
var IMAGE_HEIGHT = 90;
var Whiteboard = ({
  images,
  showDownload = true,
  className,
  onDownload,
  imagesPerRow = 2,
  ...rest
}) => {
  const [imageErrors, setImageErrors] = useState(/* @__PURE__ */ new Set());
  const handleDownload = useCallback(
    (image) => {
      if (onDownload) {
        onDownload(image);
      } else {
        const link = document.createElement("a");
        link.href = image.imageUrl;
        link.download = image.title || `whiteboard-${image.id}`;
        link.target = "_blank";
        link.rel = "noopener noreferrer";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    },
    [onDownload]
  );
  const handleImageError = useCallback((imageId) => {
    setImageErrors((prev) => new Set(prev).add(imageId));
  }, []);
  const gridColsClass = images?.length === 1 ? "grid-cols-1" : {
    2: "grid-cols-1 sm:grid-cols-2",
    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
  }[imagesPerRow];
  if (!images || images.length === 0) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: cn(
          "flex items-center justify-center p-8 bg-background border border-border-50 rounded-xl",
          className
        ),
        ...rest,
        children: /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm", children: "Nenhuma imagem dispon\xEDvel" })
      }
    );
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cn(
        "flex flex-col bg-background border border-border-50 p-4 gap-2 rounded-xl w-fit mx-auto",
        className
      ),
      ...rest,
      children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-4", gridColsClass), children: images.map((image) => /* @__PURE__ */ jsxs(
        "div",
        {
          className: "relative group overflow-hidden bg-gray-100 rounded-lg",
          style: {
            width: `${IMAGE_WIDTH}px`
          },
          children: [
            /* @__PURE__ */ jsx(
              "div",
              {
                className: "relative",
                style: {
                  width: `${IMAGE_WIDTH}px`,
                  height: `${IMAGE_HEIGHT}px`
                },
                children: imageErrors.has(image.id) ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-200", children: /* @__PURE__ */ jsx("p", { className: "text-gray-500 text-sm text-center px-2", children: "Imagem indispon\xEDvel" }) }) : /* @__PURE__ */ jsxs(
                  "button",
                  {
                    type: "button",
                    onClick: () => handleDownload(image),
                    className: "absolute inset-0 w-full h-full cursor-pointer border-none p-0 bg-transparent",
                    "aria-label": `Ampliar ${image.title || "imagem"}`,
                    children: [
                      /* @__PURE__ */ jsx(
                        "img",
                        {
                          src: image.imageUrl,
                          alt: image.title || `Whiteboard ${image.id}`,
                          className: "w-full h-full object-cover",
                          loading: "lazy",
                          onError: () => handleImageError(image.id)
                        }
                      ),
                      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/20 to-transparent pointer-events-none" })
                    ]
                  }
                )
              }
            ),
            showDownload && /* @__PURE__ */ jsx(
              "button",
              {
                type: "button",
                onClick: () => handleDownload(image),
                className: "cursor-pointer absolute bottom-3 right-3 flex items-center justify-center bg-black/20 backdrop-blur-sm rounded hover:bg-black/30 transition-colors duration-200 group/button w-6 h-6",
                "aria-label": `Download ${image.title || "imagem"}`,
                children: /* @__PURE__ */ jsx(
                  ArrowsOutIcon,
                  {
                    size: 24,
                    weight: "regular",
                    className: "text-white group-hover/button:scale-110 transition-transform duration-200"
                  }
                )
              }
            )
          ]
        },
        image.id
      )) })
    }
  );
};
var Whiteboard_default = Whiteboard;

export {
  Whiteboard_default
};
//# sourceMappingURL=chunk-6TUOCZ7Y.mjs.map