@redocly/theme/lib/components/Buttons/EditPageButton.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditPageButton = EditPageButton;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const hooks_1 = require("../../core/hooks");
const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
const Link_1 = require("../../components/Link/Link");
function EditPageButton({ to }) {
    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    const otelTelemetry = useOtelTelemetry();
    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", target: "_blank", to: to, onClick: () => otelTelemetry.send({ type: 'edit_page_link.clicked' }) },
        react_1.default.createElement(ButtonIcon, null),
        react_1.default.createElement(ButtonText, { "data-translation-key": "markdown.editPage.text" }, translate('markdown.editPage.text', 'Edit'))));
}
const EditPageButtonWrapper = (0, styled_components_1.default)(Link_1.Link) `
  height: fit-content;
  margin-left: auto;
  display: inline-flex;
  color: var(--text-color-secondary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  text-decoration: none;

  &:hover {
    color: var(--text-color-primary);
  }

  @media print {
    display: none;
  }
`;
const ButtonIcon = (0, styled_components_1.default)(EditIcon_1.EditIcon) `
  margin-right: 3px;
`;
const ButtonText = styled_components_1.default.span `
  line-height: 14px;
`;
//# sourceMappingURL=EditPageButton.js.map