sociial-card/dist/index.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _core = require("@emotion/core");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var propTypes = {
  alt: _propTypes["default"].string,
  body: _propTypes["default"].string,
  src: _propTypes["default"].string.isRequired,
  title: _propTypes["default"].string
};
var defaultProps = {
  alt: 'sociial-card',
  title: '',
  body: ''
};

var SociialCard = function SociialCard(props) {
  return (0, _core.jsx)("figure", {
    css: {
      "display": "flex",
      "maxWidth": "24rem",
      "margin": "auto",
      "borderStyle": "solid",
      "borderWidth": "1px",
      "flexDirection": "column",
      "borderRadius": "0.25rem",
      "boxShadow": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
      "overflow": "hidden"
    }
  }, (0, _core.jsx)("img", {
    src: props.src,
    alt: props.alt,
    css: {
      "width": "100%"
    }
  }), (0, _core.jsx)("figcaption", {
    css: {
      "paddingLeft": "1.5rem",
      "paddingRight": "1.5rem",
      "paddingTop": "1rem",
      "paddingBottom": "1rem"
    }
  }, (0, _core.jsx)("h1", {
    css: {
      "fontWeight": "700",
      "fontSize": "1.25rem",
      "marginBottom": "0.5rem"
    }
  }, props.title), (0, _core.jsx)("p", {
    css: {
      "--text-opacity": "1",
      "color": "rgba(74, 85, 104, var(--text-opacity))",
      "fontSize": "1rem"
    }
  }, props.body)));
};

SociialCard.propTypes = propTypes;
SociialCard.defaultProps = defaultProps;
var _default = SociialCard;
exports["default"] = _default;