@redocly/theme
Version:
Shared UI components lib
53 lines (52 loc) • 2.5 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UserInfoMenuItem = UserInfoMenuItem;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
const UserAvatar_1 = require("../../components/UserMenu/UserAvatar");
function UserInfoMenuItem({ name, picture, email, className, }) {
return (react_1.default.createElement(UserInfoMenuItemWrapper, { className: className, role: "none" },
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(UserAvatar_1.UserAvatar, { width: "var(--user-menu-avatar-width)", height: "var(--user-menu-avatar-height)", picture: picture }),
react_1.default.createElement(UserInfoDetailsWrapper, null,
name !== email ? react_1.default.createElement(UserName, null, name) : null,
email ? react_1.default.createElement(Email, { title: email }, email) : null))));
}
const UserInfoMenuItemWrapper = (0, styled_components_1.default)(DropdownMenuItem_1.DropdownMenuItem).attrs({
'data-component-name': 'UserMenu/UserInfoMenuItem',
}) `
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: var(--user-menu-user-info-items-gap);
cursor: default;
--dropdown-menu-item-padding-vertical: var(--user-menu-user-details-padding-vertical);
--dropdown-menu-item-padding-horizontal: var(--user-menu-user-details-padding-horizontal);
--dropdown-menu-item-bg-color: var(--user-menu-user-details-bg-color);
--dropdown-menu-item-bg-color-hover: var(--user-menu-user-details-bg-color);
`;
const UserName = styled_components_1.default.div `
font-weight: var(--user-menu-name-font-weight);
font-size: var(--user-menu-name-font-size);
line-height: var(--user-menu-name-line-height);
`;
const Email = styled_components_1.default.div `
font-size: var(--user-menu-email-font-size);
line-height: var(--user-menu-email-line-height);
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
min-width: 0;
`;
const UserInfoDetailsWrapper = styled_components_1.default.div `
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
`;
//# sourceMappingURL=UserInfoMenuItem.js.map