@navinc/base-react-components
Version:
Nav's Pattern Library
38 lines (36 loc) • 1.33 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { styled } from 'styled-components';
const StyledFigure = styled.figure.withConfig({ displayName: "brc-sc-StyledFigure", componentId: "brc-sc-uh4trs" }) `
position: relative;
padding: 0 16px;
margin: 0 0 16px 16px;
::before {
content: '';
height: 100%;
position: absolute;
left: 0;
width: 4px;
border: solid ${({ color = 'navPrimary', theme }) => { var _a; return (_a = theme[color]) !== null && _a !== void 0 ? _a : theme.navPrimary; }} 2px;
background: ${({ color = 'navPrimary', theme }) => { var _a; return (_a = theme[color]) !== null && _a !== void 0 ? _a : theme.navPrimary; }};
border-radius: 2px;
}
`;
const StyledBlockQuote = styled.blockquote.withConfig({ displayName: "brc-sc-StyledBlockQuote", componentId: "brc-sc-bsq0sj" }) `
&& p {
padding-bottom: 0;
color: ${({ theme }) => theme.navNeutralDark};
font-style: italic;
font-size: 14px;
}
margin: 0 20px;
display: flex;
flex-direction: column;
gap: 16px;
`;
/**
* Component to handle blockquote in the blog. Color uses theme colors.
*/
export const BlockQuote = ({ children, color }) => {
return (_jsx(StyledFigure, { color: color, children: _jsx(StyledBlockQuote, { children: children }) }));
};
//# sourceMappingURL=block-quote.js.map