@unstoppabledomains/ui-kit/icons/IconPlate.js

A set of common Unstoppable Domains components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _styles = require("../styles");
var useStyles = (0, _styles.makeStyles)()(function (theme, _ref) {
  var size = _ref.size,
    variant = _ref.variant;
  var variantToColor = function variantToColor() {
    switch (variant) {
      case 'info':
        return theme.palette.primary.main;
      case 'error':
        return theme.palette.error.main;
      case 'success':
        return theme.palette.success.dark;
      default:
        return theme.palette.neutralShades[500];
    }
  };
  var variantToShadowColor = function variantToShadowColor() {
    switch (variant) {
      case 'info':
        return theme.palette.primary.main;
      case 'error':
        return theme.palette.dangerShades[900];
      case 'success':
        return theme.palette.successShades[900];
      default:
        return theme.palette.greyShades[900];
    }
  };
  var color = variantToColor();
  var shadowColor = variantToShadowColor();
  return {
    box: {
      position: 'relative',
      width: size,
      height: size,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: theme.shape.borderRadius,
      backgroundSize: "".concat(size / 6.4, "px ").concat(size / 6.4, "px"),
      backgroundColor: 'white',
      backgroundImage: "linear-gradient(\n        to right,\n        rgba(0, 0, 0, 0.06) 1px,\n        transparent 1px\n      ),\n      linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px)",
      backgroundPosition: "-".concat(0.0625 * size, "px"),
      boxShadow: '0px 2px 3.3333334922790527px -1.6666667461395264px rgba(0, 0, 0, 0.06)',
      overflow: 'hidden',
      '&:before': {
        content: "''",
        width: '100%',
        height: '100%',
        position: 'absolute',
        boxShadow: "inset 0 0 0 1px ".concat(shadowColor, "33"),
        borderRadius: theme.shape.borderRadius
      }
    },
    ellipse1: {
      position: 'absolute',
      width: size / 2,
      height: size / 2,
      right: 0.22,
      bottom: 0,
      background: color,
      opacity: 0.12,
      filter: "blur(".concat(size / 4, "px)"),
      zIndex: 3
    },
    ellipse2: {
      position: 'absolute',
      width: size / 2,
      height: size / 2,
      left: 0,
      top: 0,
      background: color,
      opacity: 0.32,
      filter: "blur(".concat(size / 4, "px)"),
      zIndex: 2
    },
    ellipse3: {
      position: 'absolute',
      width: size,
      height: size,
      left: "calc(50% - ".concat(size, "px / 2)"),
      top: "calc(50% - ".concat(size, "px / 2)"),
      background: '#ffffff',
      filter: "blur(".concat(size * 0.08333, "px)"),
      zIndex: 1
    },
    icon: {
      display: 'flex',
      zIndex: 4,
      '& > svg': {
        fontSize: size * 0.75,
        '& > path': {
          color: color
        }
      }
    }
  };
});
var IconPlate = function IconPlate(_ref2) {
  var children = _ref2.children,
    _ref2$variant = _ref2.variant,
    variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
    _ref2$size = _ref2.size,
    size = _ref2$size === void 0 ? 32 : _ref2$size,
    className = _ref2.className;
  var _useStyles = useStyles({
      size: size,
      variant: variant
    }),
    classes = _useStyles.classes,
    cx = _useStyles.cx;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: cx(classes.box, className)
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.ellipse1
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.ellipse2
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.ellipse3
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.icon
  }, children));
};
var _default = exports["default"] = IconPlate;