@atlaskit/profilecard/dist/esm/styled/CoverImage.js

A React component to display a card with user information.

/* CoverImage.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./CoverImage.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useRef } from 'react';
import { cx } from '@atlaskit/css';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box } from '@atlaskit/primitives/compiled';
var styles = {
  container: "_1reo15vq _18m915vq _1bsb1osq _4t3i1qr7 _kqswh2mm _13li12b0 _qrwq12b0 _1e0c1txw _1bah1h6o _4cvr1h6o",
  image: "_1bsbnklw _4t3i1wug",
  imageNext: "_4t3i1osq _5ral1dfr",
  grayoutImage: "_kdam7g3v"
};

/**
 * This is instead of using background-image in CSS as design-system doesn't support that
 */
export var CoverImage = function CoverImage(_ref) {
  var src = _ref.src,
    _ref$alt = _ref.alt,
    alt = _ref$alt === void 0 ? '' : _ref$alt,
    isDisabled = _ref.isDisabled;
  var containerRef = useRef(null);
  var imgRef = useRef(null);
  return /*#__PURE__*/React.createElement(Box, {
    ref: containerRef,
    xcss: styles.container,
    backgroundColor: "color.background.neutral"
  }, /*#__PURE__*/React.createElement(Box, {
    as: "img",
    ref: imgRef,
    src: src,
    alt: alt,
    xcss: cx(fg('cover-header-image-team-profilecard') ? styles.imageNext : styles.image, isDisabled && styles.grayoutImage)
  }));
};