@redocly/theme/lib/markdoc/components/Cards/CardIcon.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.CardIcon = CardIcon;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const InlineSvg_1 = require("../../../markdoc/components/InlineSvg/InlineSvg");
function CardIcon({ variant, src, rawContent, position }) {
    return (react_1.default.createElement(CardIconWrapper, { "$variant": variant, "$position": position }, rawContent ? react_1.default.createElement(CardSvg, { fileRawContent: rawContent }) : react_1.default.createElement(CardImg, { src: src })));
}
const CardImg = styled_components_1.default.img `
  width: var(--card-icon-width);
  height: var(--card-icon-height);
  display: inline-block;
  object-fit: cover;
`;
const CardSvg = (0, styled_components_1.default)(InlineSvg_1.InlineSvg) `
  width: var(--card-icon-width);
  height: var(--card-icon-height);
  display: inline-block;

  svg {
    width: 100%;
    height: 100%;
    fill: var(--card-icon-color);
  }
`;
const CardIconWrapper = styled_components_1.default.div `
  display: flex;
  align-self: ${({ $position }) => ($position ? $position : 'auto')};
  justify-content: center;
  min-width: var(--card-icon-width);
  min-height: var(--card-icon-height);
  flex-shrink: 0;

  padding: ${({ $variant }) => ($variant === 'ghost' ? '0' : `var(--card-icon-padding);`)};
  border-radius: var(--card-icon-border-radius);
  overflow: hidden;

  background-color: ${({ $variant }) => $variant === 'ghost' ? 'transparent' : 'var(--card-icon-bg-color)'};
  border: ${({ $variant }) => $variant === 'ghost' ? 'none' : `1px solid var(--card-icon-border-color)`};
`;
//# sourceMappingURL=CardIcon.js.map