@navinc/base-react-components
Version:
Nav's Pattern Library
28 lines (27 loc) • 1.31 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { Header } from './header.js';
import { Copy } from './copy.js';
const AuthorContainer = styled.div.withConfig({ displayName: "brc-sc-AuthorContainer", componentId: "brc-sc-qh1f6r" }) `
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.div.withConfig({ displayName: "brc-sc-AuthorDetails", componentId: "brc-sc-8lco1s" }) `
display: grid;
grid-gap: 8px;
text-align: center;
justify-items: center;
`;
const AuthorImg = styled.img.withConfig({ displayName: "brc-sc-AuthorImg", componentId: "brc-sc-1821rq5" }) `
border-radius: 50%;
max-width: 100px;
`;
export const AuthorCard = ({ description, img, imgAlt, name, title }) => (_jsxs(AuthorContainer, { children: [_jsxs(AuthorDetails, { children: [_jsx(Header, { children: "ABOUT AUTHOR" }), _jsx(AuthorImg, { src: img, alt: imgAlt }), _jsx(Header, { size: "sm", children: name }), _jsx(Copy, { light: true, children: title })] }), _jsx(Copy, { children: description })] }));
//# sourceMappingURL=author-card.js.map