analytica-frontend-lib/dist/Whiteboard/index.js

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

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/Whiteboard/Whiteboard.tsx
var Whiteboard_exports = {};
__export(Whiteboard_exports, {
  default: () => Whiteboard_default
});
module.exports = __toCommonJS(Whiteboard_exports);
var import_react = require("react");
var import_phosphor_react = require("phosphor-react");

// src/utils/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}

// src/components/Whiteboard/Whiteboard.tsx
var import_jsx_runtime = 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] = (0, import_react.useState)(/* @__PURE__ */ new Set());
  const handleDownload = (0, import_react.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 = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
      "div",
      {
        className: cn(
          "flex items-center justify-center p-8 bg-background border border-border-50 rounded-xl",
          className
        ),
        ...rest,
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-gray-400 text-sm", children: "Nenhuma imagem dispon\xEDvel" })
      }
    );
  }
  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("grid gap-4", gridColsClass), children: images.map((image) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
        "div",
        {
          className: "relative group overflow-hidden bg-gray-100 rounded-lg",
          style: {
            width: `${IMAGE_WIDTH}px`
          },
          children: [
            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              "div",
              {
                className: "relative",
                style: {
                  width: `${IMAGE_WIDTH}px`,
                  height: `${IMAGE_HEIGHT}px`
                },
                children: imageErrors.has(image.id) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-gray-500 text-sm text-center px-2", children: "Imagem indispon\xEDvel" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                    "img",
                    {
                      src: image.imageUrl,
                      alt: image.title || `Whiteboard ${image.id}`,
                      className: "absolute inset-0 w-full h-full object-cover",
                      loading: "lazy",
                      onError: () => handleImageError(image.id)
                    }
                  ),
                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" })
                ] })
              }
            ),
            showDownload && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
                  import_phosphor_react.ArrowsOut,
                  {
                    size: 24,
                    weight: "regular",
                    className: "text-white group-hover/button:scale-110 transition-transform duration-200"
                  }
                )
              }
            )
          ]
        },
        image.id
      )) })
    }
  );
};
var Whiteboard_default = Whiteboard;
//# sourceMappingURL=index.js.map