analytica-frontend-lib/dist/chunk-AJC7YAEK.js

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

"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }

var _chunkTN3AYOMVjs = require('./chunk-TN3AYOMV.js');

// src/components/Whiteboard/Whiteboard.tsx
var _react = require('react');
var _ArrowsOut = require('@phosphor-icons/react/dist/csr/ArrowsOut');
var _jsxruntime = require('react/jsx-runtime');
var IMAGE_WIDTH = 225;
var IMAGE_HEIGHT = 90;
var Whiteboard = ({
  images,
  showDownload = true,
  className,
  onDownload,
  imagesPerRow = 2,
  ...rest
}) => {
  const [imageErrors, setImageErrors] = _react.useState.call(void 0, /* @__PURE__ */ new Set());
  const handleDownload = _react.useCallback.call(void 0, 
    (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 = _react.useCallback.call(void 0, (imageId) => {
    setImageErrors((prev) => new Set(prev).add(imageId));
  }, []);
  const gridColsClass = _optionalChain([images, 'optionalAccess', _ => _.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__ */ _jsxruntime.jsx.call(void 0, 
      "div",
      {
        className: _chunkTN3AYOMVjs.cn.call(void 0, 
          "flex items-center justify-center p-8 bg-background border border-border-50 rounded-xl",
          className
        ),
        ...rest,
        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-gray-400 text-sm", children: "Nenhuma imagem dispon\xEDvel" })
      }
    );
  }
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
    "div",
    {
      className: _chunkTN3AYOMVjs.cn.call(void 0, 
        "flex flex-col bg-background border border-border-50 p-4 gap-2 rounded-xl w-fit mx-auto",
        className
      ),
      ...rest,
      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkTN3AYOMVjs.cn.call(void 0, "grid gap-4", gridColsClass), children: images.map((image) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
        "div",
        {
          className: "relative group overflow-hidden bg-gray-100 rounded-lg",
          style: {
            width: `${IMAGE_WIDTH}px`
          },
          children: [
            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
              "div",
              {
                className: "relative",
                style: {
                  width: `${IMAGE_WIDTH}px`,
                  height: `${IMAGE_HEIGHT}px`
                },
                children: imageErrors.has(image.id) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute inset-0 flex items-center justify-center bg-gray-200", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-gray-500 text-sm text-center px-2", children: "Imagem indispon\xEDvel" }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                  "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__ */ _jsxruntime.jsx.call(void 0, 
                        "img",
                        {
                          src: image.imageUrl,
                          alt: image.title || `Whiteboard ${image.id}`,
                          className: "w-full h-full object-cover",
                          loading: "lazy",
                          onError: () => handleImageError(image.id)
                        }
                      ),
                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute inset-0 bg-gradient-to-t from-black/20 to-transparent pointer-events-none" })
                    ]
                  }
                )
              }
            ),
            showDownload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
              "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__ */ _jsxruntime.jsx.call(void 0, 
                  _ArrowsOut.ArrowsOutIcon,
                  {
                    size: 24,
                    weight: "regular",
                    className: "text-white group-hover/button:scale-110 transition-transform duration-200"
                  }
                )
              }
            )
          ]
        },
        image.id
      )) })
    }
  );
};
var Whiteboard_default = Whiteboard;



exports.Whiteboard_default = Whiteboard_default;
//# sourceMappingURL=chunk-AJC7YAEK.js.map