@activecollab/components/dist/esm/components/Media/Media.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["src", "alt", "variant", "caption"];
import React, { forwardRef } from "react";
import { StyledMedia } from "./Styles";
import { Caption1 } from "../Typography";
/**
 * An image block: a screenshot renders framed (border, no shadow), a flat
 * illustration renders without a frame. The caption sits below the frame.
 */
export const Media = /*#__PURE__*/forwardRef((_ref, ref) => {
  let src = _ref.src,
    alt = _ref.alt,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? "illustration" : _ref$variant,
    caption = _ref.caption,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  return /*#__PURE__*/React.createElement(StyledMedia, _extends({
    ref: ref,
    $bordered: variant === "screenshot"
  }, rest), /*#__PURE__*/React.createElement("div", {
    className: "c-media-frame"
  }, /*#__PURE__*/React.createElement("img", {
    src: src,
    alt: alt != null ? alt : ""
  })), caption ? /*#__PURE__*/React.createElement(Caption1, {
    color: "secondary"
  }, caption) : null);
});
Media.displayName = "Media";
//# sourceMappingURL=Media.js.map