@activecollab/components
Version:
ActiveCollab Components
38 lines (37 loc) • 1.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RoundAvatar = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* A simple round initials avatar used across the presentation mock-ups in
* place of real user images. `$overlap` makes stacked avatars overlap (task
* rows / cards), `$bordered` draws the paper-coloured ring that separates
* overlapping avatars.
*/
var RoundAvatar = exports.RoundAvatar = _styledComponents.default.div.withConfig({
displayName: "RoundAvatar",
componentId: "sc-1s5jx6y-0"
})(["width:", "px;height:", "px;border-radius:50%;background-color:", ";color:#fff;display:flex;align-items:center;justify-content:center;font-size:", "px;font-weight:700;flex-shrink:0;", " &:not(:first-child){margin-left:", ";}"], function (props) {
var _props$$size;
return (_props$$size = props.$size) !== null && _props$$size !== void 0 ? _props$$size : 28;
}, function (props) {
var _props$$size2;
return (_props$$size2 = props.$size) !== null && _props$$size2 !== void 0 ? _props$$size2 : 28;
}, function (props) {
return props.$bg;
}, function (props) {
var _props$$size3;
var size = (_props$$size3 = props.$size) !== null && _props$$size3 !== void 0 ? _props$$size3 : 28;
if (size <= 22) return 9;
if (size <= 26) return 10;
return 11;
}, function (props) {
return props.$bordered === false ? "" : "border: 2px solid var(--page-paper-main);";
}, function (props) {
return props.$overlap ? "-8px" : "0";
});
RoundAvatar.displayName = "RoundAvatar";
//# sourceMappingURL=RoundAvatar.js.map