@navinc/base-react-components
Version:
Nav's Pattern Library
35 lines (34 loc) • 1.85 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AuthorCard = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const header_js_1 = require("./header.js");
const copy_js_1 = require("./copy.js");
const AuthorContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-AuthorContainer", componentId: "brc-sc-qh1f6r" }) `
display: grid;
grid-gap: 24px;
align-items: center;
box-shadow: 0 0 12px rgb(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.withConfig({ displayName: "brc-sc-AuthorDetails", componentId: "brc-sc-8lco1s" }) `
display: grid;
grid-gap: 8px;
text-align: center;
justify-items: center;
`;
const AuthorImg = styled_components_1.default.img.withConfig({ displayName: "brc-sc-AuthorImg", componentId: "brc-sc-1821rq5" }) `
border-radius: 50%;
max-width: 100px;
`;
const AuthorCard = ({ 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_js_1.Header, { children: "ABOUT AUTHOR" }), (0, jsx_runtime_1.jsx)(AuthorImg, { src: img, alt: imgAlt }), (0, jsx_runtime_1.jsx)(header_js_1.Header, { size: "sm", children: name }), (0, jsx_runtime_1.jsx)(copy_js_1.Copy, { light: true, children: title })] }), (0, jsx_runtime_1.jsx)(copy_js_1.Copy, { children: description })] }));
exports.AuthorCard = AuthorCard;
//# sourceMappingURL=author-card.js.map