@unstoppabledomains/ui-kit
Version:
A set of common Unstoppable Domains components
85 lines (84 loc) • 2.86 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
var _react = _interopRequireDefault(require("react"));
var _styles = require("../styles");
var useStyles = (0, _styles.makeStyles)()(function () {
return {
id: {}
};
});
var ProfilePlaceholder = function ProfilePlaceholder(props) {
var _useStyles = useStyles(),
classes = _useStyles.classes;
var uuid = classes.id;
var ids = Array.from({
length: 3
}).map(function (_, i) {
return "profile-placeholder-".concat(uuid, "-").concat(i);
});
return /*#__PURE__*/_react["default"].createElement(_SvgIcon["default"], (0, _extends2["default"])({
viewBox: "0 0 132 132"
}, props), /*#__PURE__*/_react["default"].createElement("mask", {
id: ids[0],
style: {
maskType: 'alpha'
},
maskUnits: "userSpaceOnUse",
x: "6",
y: "6",
width: "120",
height: "120"
}, /*#__PURE__*/_react["default"].createElement("path", {
d: "M126 66C126 99.1371 99.1371 126 66 126C32.8629 126 6 99.1371 6 66C6 32.8629 32.8629 6 66 6C99.1371 6 126 32.8629 126 66Z",
fill: "#0D67FE"
})), /*#__PURE__*/_react["default"].createElement("g", {
mask: "url(#".concat(ids[0], ")")
}, /*#__PURE__*/_react["default"].createElement("ellipse", {
cx: "66",
cy: "48",
rx: "24",
ry: "24",
fill: "url(#".concat(ids[1], ")"),
fillOpacity: "0.32"
}), /*#__PURE__*/_react["default"].createElement("circle", {
cx: "66",
cy: "140",
r: "60",
fill: "url(#".concat(ids[2], ")"),
fillOpacity: "0.32"
})), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("linearGradient", {
id: ids[1],
x1: "66",
y1: "24",
x2: "66",
y2: "72",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/_react["default"].createElement("stop", {
stopColor: props.stopColor || 'white'
}), /*#__PURE__*/_react["default"].createElement("stop", {
offset: "1",
stopColor: props.stopColor || 'white',
stopOpacity: "0.4"
})), /*#__PURE__*/_react["default"].createElement("linearGradient", {
id: ids[2],
x1: "66",
y1: "80",
x2: "66",
y2: "200",
gradientUnits: "userSpaceOnUse"
}, /*#__PURE__*/_react["default"].createElement("stop", {
stopColor: props.stopColor || 'white'
}), /*#__PURE__*/_react["default"].createElement("stop", {
offset: "1",
stopColor: props.stopColor || 'white',
stopOpacity: "0.4"
}))));
};
ProfilePlaceholder.muiName = 'ProfilePlaceholderIcon';
var _default = exports["default"] = ProfilePlaceholder;