@cristianchaparroa/simple-dyamond/dist/index.esm.js

A simple, customizable diamond-shaped React component

import React from 'react';

var SimpleDyamond = function SimpleDyamond(_ref) {
  var _ref$size = _ref.size,
    size = _ref$size === void 0 ? 100 : _ref$size,
    _ref$color = _ref.color,
    color = _ref$color === void 0 ? "#3498db" : _ref$color,
    _ref$borderColor = _ref.borderColor,
    borderColor = _ref$borderColor === void 0 ? "#2980b9" : _ref$borderColor,
    _ref$borderWidth = _ref.borderWidth,
    borderWidth = _ref$borderWidth === void 0 ? 2 : _ref$borderWidth,
    _ref$content = _ref.content,
    content = _ref$content === void 0 ? "" : _ref$content,
    _ref$contentColor = _ref.contentColor,
    contentColor = _ref$contentColor === void 0 ? "#fff" : _ref$contentColor;
  var styles = {
    width: size,
    height: size,
    backgroundColor: color,
    border: "".concat(borderWidth, "px solid ").concat(borderColor),
    transform: 'rotate(45deg)',
    display: 'inline-block',
    position: 'relative',
    cursor: 'pointer',
    transition: 'all 0.3s ease'
  };
  var contentStyles = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%) rotate(-45deg)',
    color: contentColor,
    fontSize: "".concat(size * 0.15, "px"),
    fontWeight: 'bold',
    textAlign: 'center',
    pointerEvents: 'none'
  };
  return /*#__PURE__*/React.createElement("div", {
    style: styles
  }, content && /*#__PURE__*/React.createElement("div", {
    style: contentStyles
  }, content));
};

export { SimpleDyamond, SimpleDyamond as default };
//# sourceMappingURL=index.esm.js.map