@redocly/theme/lib/components/Catalog/CatalogEntity/CatalogEntityInfoBar.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.CatalogEntityInfoBar = CatalogEntityInfoBar;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
function CatalogEntityInfoBar({ leftContent, rightContent, withSeparator = true, hoverEffect = true, isCodeBlock = false, }) {
    return (react_1.default.createElement(InfoBarWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityInfoBar", hoverEffect: hoverEffect },
        react_1.default.createElement(LeftColumn, { withSeparator: withSeparator }, leftContent),
        rightContent && react_1.default.createElement(RightColumn, { isCodeBlock: isCodeBlock }, rightContent)));
}
const InfoBarWrapper = styled_components_1.default.div `
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'left right';
  align-items: center;

  color: var(--catalog-card-text-color, inherit);
  background-color: var(--catalog-card-bg-color);
  border: var(--catalog-card-border-width, 1px) var(--catalog-card-border-style)
    var(--catalog-card-border-color);
  border-radius: var(--catalog-card-border-radius);
  transition: all 0.2s ease-in-out;
  height: 100%;
  padding: var(--catalog-card-gap);
  margin-bottom: var(--spacing-xs);

  ${({ hoverEffect }) => hoverEffect &&
    `
    &:hover {
      border-color: var(--catalog-card-border-color-hover);
      background-color: var(--bg-color-active);
    }
  `}
`;
const LeftColumn = styled_components_1.default.div `
  font-weight: var(--font-weight-medium);
  color: var(--catalog-metadata-label-color);
  width: 100%;
  grid-area: left;
  justify-self: start;
  text-align: left;
  border-right: ${({ withSeparator }) => withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
  height: 100%;
  display: flex;
  align-items: center;
`;
const RightColumn = styled_components_1.default.div `
  color: var(--catalog-metadata-value-color);
  font-weight: var(--font-weight-medium);
  grid-area: right;
  justify-self: end;
  text-align: right;
  width: ${({ isCodeBlock }) => (isCodeBlock ? '100%' : 'auto')};
`;
//# sourceMappingURL=CatalogEntityInfoBar.js.map