@redocly/theme
Version:
Shared UI components lib
58 lines • 2.75 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PageActionsMenuItem = PageActionsMenuItem;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
function PageActionsMenuItem(props) {
const { pageAction } = props;
return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "PageActions/PageActionsMenuItem" },
react_1.default.createElement(IconWrapper, null,
react_1.default.createElement(pageAction.iconComponent, null)),
react_1.default.createElement(ContentWrapper, null,
react_1.default.createElement(Title, null,
pageAction.title,
'link' in pageAction ? (react_1.default.createElement(LaunchIcon_1.LaunchIcon, { color: "var(--page-actions-menu-item-title-icon-color)", size: "14px" })) : null),
react_1.default.createElement(Description, null, pageAction.description))));
}
const MenuItemWrapper = styled_components_1.default.div `
padding: var(--page-actions-menu-item-padding);
display: flex;
flex-direction: row;
align-items: center;
gap: var(--page-actions-menu-item-gap);
`;
const IconWrapper = styled_components_1.default.div `
color: var(--page-actions-menu-item-icon-color);
border: 1px solid var(--page-actions-menu-item-icon-border-color);
border-radius: var(--page-actions-menu-item-icon-border-radius);
width: var(--page-actions-menu-item-icon-wrapper-size);
height: var(--page-actions-menu-item-icon-wrapper-size);
display: flex;
align-items: center;
justify-content: center;
`;
const ContentWrapper = styled_components_1.default.div `
display: flex;
flex-direction: column;
gap: var(--page-actions-menu-item-text-gap);
`;
const Title = styled_components_1.default.div `
font-weight: var(--page-actions-menu-item-title-font-weight);
font-size: var(--page-actions-menu-item-title-font-size);
line-height: var(--page-actions-menu-item-title-line-height);
color: var(--page-actions-menu-item-title-color);
display: flex;
align-items: center;
gap: var(--page-actions-menu-item-title-icon-gap);
`;
const Description = styled_components_1.default.div `
font-weight: var(--page-actions-menu-item-description-font-weight);
font-size: var(--page-actions-menu-item-description-font-size);
line-height: var(--page-actions-menu-item-description-line-height);
color: var(--page-actions-menu-item-description-color);
`;
//# sourceMappingURL=PageActionsMenuItem.js.map