@redocly/theme
Version:
Shared UI components lib
51 lines • 2.46 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CatalogEntityCell = CatalogEntityCell;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight");
const CatalogEntityTypeIcon_1 = require("../../../components/Catalog/CatalogEntityTypeIcon");
function CatalogEntityCell({ entity }) {
return (react_1.default.createElement(EntityTitleCellWrapper, { "data-component-name": "Catalog/CatalogTableView/CatalogEntityCell" },
react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type }),
react_1.default.createElement(EntityTitleContent, null,
react_1.default.createElement(EntityTitle, { "data-component-name": "Catalog/CatalogTableView/CatalogEntityTitle" },
react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title)),
entity.summary && (react_1.default.createElement(EntitySummary, null,
react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.summary))))));
}
const EntityTitleCellWrapper = styled_components_1.default.div `
display: flex;
align-items: center;
gap: var(--catalog-table-title-cell-gap);
max-width: 100%;
`;
const EntityTitleContent = styled_components_1.default.div `
display: flex;
flex-direction: column;
max-width: calc(
100% - var(--catalog-table-entity-title-content-offset)
); /* Account for icon width (30px) + gap (12px) */
overflow: hidden;
`;
const EntityTitle = styled_components_1.default.div `
font-size: var(--catalog-table-entity-title-font-size);
line-height: var(--catalog-table-entity-title-line-height);
font-weight: var(--catalog-table-entity-title-font-weight);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`;
const EntitySummary = styled_components_1.default.div `
font-size: var(--catalog-table-entity-summary-font-size);
line-height: var(--catalog-table-entity-summary-line-height);
color: var(--catalog-table-description-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
`;
//# sourceMappingURL=CatalogEntityCell.js.map