@navinc/base-react-components/cjs/author-card.js

Nav's Pattern Library

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const header_1 = __importDefault(require("./header"));
const copy_1 = __importDefault(require("./copy"));
const AuthorContainer = styled_components_1.default.div `
  display: grid;
  grid-gap: 24px;
  align-items: center;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  padding: 32px 40px;

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    grid-template-columns: 25% 1fr;
  }
`;
const AuthorDetails = styled_components_1.default.div `
  display: grid;
  grid-gap: 8px;
  text-align: center;
  justify-items: center;
`;
const AuthorImg = styled_components_1.default.img `
  border-radius: 50%;
  max-width: 100px;
`;
exports.default = ({ description, img, imgAlt, name, title }) => ((0, jsx_runtime_1.jsxs)(AuthorContainer, { children: [(0, jsx_runtime_1.jsxs)(AuthorDetails, { children: [(0, jsx_runtime_1.jsx)(header_1.default, { children: "ABOUT AUTHOR" }, void 0), (0, jsx_runtime_1.jsx)(AuthorImg, { src: img, alt: imgAlt }, void 0), (0, jsx_runtime_1.jsx)(header_1.default, Object.assign({ size: "sm" }, { children: name }), void 0), (0, jsx_runtime_1.jsx)(copy_1.default, Object.assign({ light: true }, { children: title }), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(copy_1.default, { children: description }, void 0)] }, void 0));
//# sourceMappingURL=author-card.js.map