@redocly/theme
Version:
Shared UI components lib
50 lines • 2.47 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.CatalogEntityLinks = CatalogEntityLinks;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const LaunchIcon_1 = require("../../../icons/LaunchIcon/LaunchIcon");
const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityInfoBar");
const Link_1 = require("../../../components/Link/Link");
const hooks_1 = require("../../../core/hooks");
function CatalogEntityLinks({ entity }) {
const { useTranslate } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
const links = Object.entries(entity.links || []);
if (!links.length) {
return null;
}
return (react_1.default.createElement(LinksWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityLinks" },
react_1.default.createElement(Heading, null, translate('catalog.links.label', 'Links')),
links.map(([key, value]) => (react_1.default.createElement(Link_1.Link, { key: key, color: "var(--catalog-metadata-link-color)", to: value.url, target: "_blank" },
react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { leftContent: react_1.default.createElement(Label, null,
react_1.default.createElement(LinkIcon_1.LinkIcon, null),
" ",
value.label), rightContent: react_1.default.createElement(LaunchIcon_1.LaunchIcon, null), withSeparator: false }))))));
}
const LinksWrapper = styled_components_1.default.div `
display: flex;
flex-direction: column;
border-radius: var(--border-radius);
background-color: var(--catalog-metadata-bg-color);
transition: all 0.2s ease-in-out;
margin: var(--spacing-lg) 0;
`;
const Label = styled_components_1.default.span `
display: flex;
align-items: center;
gap: var(--spacing-unit);
font-weight: var(--font-weight-medium);
color: var(--catalog-metadata-label-color);
`;
const Heading = styled_components_1.default.h2 `
margin-bottom: var(--spacing-sm);
margin-top: 0;
font-size: var(--font-size-md);
color: var(--catalog-metadata-heading-color);
`;
//# sourceMappingURL=CatalogEntityLinks.js.map