@redocly/theme/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard.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.CatalogEntityPropertyCard = CatalogEntityPropertyCard;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
function CatalogEntityPropertyCard({ header, content, onClick, hoverEffect = true, }) {
    return (react_1.default.createElement(CatalogEntityPropertyWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard", onClick: onClick, hoverEffect: hoverEffect },
        react_1.default.createElement(CardHeader, null, header),
        react_1.default.createElement(CardContent, null, content)));
}
const CatalogEntityPropertyWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  color: var(--catalog-card-text-color);
  background-color: var(--catalog-card-bg-color);
  border: var(--catalog-card-border-width) var(--catalog-card-border-style)
    var(--catalog-card-border-color);
  border-radius: var(--catalog-card-border-radius, 8px);
  transition: all 0.2s ease-in-out;
  height: 100%;
  padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
  gap: var(--catalog-card-content-gap-vertical);

  ${({ hoverEffect }) => hoverEffect &&
    `
    &:hover {
      border-color: var(--catalog-card-border-color-hover);
    }
  `}

  ${(props) => props.onClick &&
    `
    cursor: pointer;
  `}
`;
const CardHeader = styled_components_1.default.div `
  display: flex;
  align-items: center;
  gap: var(--catalog-card-content-gap);
  font-weight: var(--font-weight-medium);
`;
const CardContent = styled_components_1.default.div `
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--catalog-card-content-gap);
  flex-wrap: wrap;
  color: var(--text-color-primary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
`;
//# sourceMappingURL=CatalogEntityPropertyCard.js.map