@activecollab/components/dist/esm/presentation/stackedCard/content/ImageCard.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import React from "react";
import { COVER_RATIO_IMAGE, StyledColorCover, coverManagement, Placeholder } from "./shared";
import { UploadIcon } from "../../../components/Icons";
import { SkeletonLoader } from "../../../components/Loaders";
import { StackedCardCover as Cover } from "../../../components/StackedCard";

/**
 * ImageCard — a full-bleed image and little else. Cover-management controls
 * (collapse, remove) appear on hover; there is no other chrome. Fixed-box in
 * production (host sets width AND height, the cover scales aspect-locked); shown
 * here in the auto-height shell with a reserved image aspect ratio.
 */

export const ImageCard = _ref => {
  let _ref$color = _ref.color,
    color = _ref$color === void 0 ? "#F0997B" : _ref$color,
    src = _ref.src;
  return /*#__PURE__*/React.createElement(Cover, {
    aspectRatio: COVER_RATIO_IMAGE,
    topRightSlot: coverManagement({
      removeLabel: "Remove image"
    })
  }, src ? /*#__PURE__*/React.createElement("img", {
    src: src,
    alt: ""
  }) : /*#__PURE__*/React.createElement(StyledColorCover, {
    $color: color
  }));
};

/* ---- placeholder + skeleton ---- */

/* The placeholder doubles as the drop target (visual only here). */
export const ImagePlaceholder = props => /*#__PURE__*/React.createElement(Placeholder, _extends({
  icon: /*#__PURE__*/React.createElement(UploadIcon, null),
  label: "Drop an image or click to upload",
  height: 168,
  dashed: true
}, props));
export const ImageSkeleton = () => /*#__PURE__*/React.createElement(Cover, {
  aspectRatio: COVER_RATIO_IMAGE
}, /*#__PURE__*/React.createElement(SkeletonLoader, {
  style: {
    width: "100%",
    height: "100%"
  }
}));
//# sourceMappingURL=ImageCard.js.map