Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 2x 2x 2x 2x 2x 2x 2x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 2x 2x 6x 2x 6x 2x 6x 2x 6x | import styled from "styled-components";
import SyntaxHighlighter from "react-syntax-highlighter";
import { vs, dark } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import { CodePreviewProps, CodePreviewStyleProps } from "./CodePreview.types";
import { useTheme } from "../ThemeProvider/ThemeProvider";
import { getColorPalette } from "../../helpers/helpers";
import colorTokens from "../../tokens/colors.json";
const CodePreview = ({
code,
text,
width = "auto",
color = colorTokens.default.primary.main,
"data-testid": dataTestId,
className,
style,
codeStyle,
textStyle,
language = "javascript",
...props
}: CodePreviewProps) => {
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
const appearance = colorPalette![color].appearance
return (
<StyledCodePreview
$colorPalette={colorPalette}
$width={width}
$color={color}
data-testid={dataTestId}
className={className}
style={style}
{...props}
>
<StyledCode $colorPalette={colorPalette} $color={color} style={codeStyle}>
{code}
</StyledCode>
<StyledContainer $colorPalette={colorPalette} $color={color} style={textStyle}>
<StyledSyntaxHighlighter
language={language}
style={appearance === colorTokens.theme.appearance.light ? vs : dark}
$colorPalette={colorPalette}
$color={color}
>
{text}
</StyledSyntaxHighlighter>
</StyledContainer>
</StyledCodePreview>
);
};
export default CodePreview;
const StyledCodePreview = styled.div<CodePreviewStyleProps>`
display: flex;
flex-direction: column;
border-radius: 0.5rem;
width: ${(props) => props.$width};
`;
const StyledCode = styled.div<CodePreviewStyleProps>`
display: flex;
justify-content: center;
align-items: center;
padding: 1.5rem;
border-radius: 0.5rem 0.5rem 0 0;
${(props) => {
return `
background-color: ${props.$colorPalette[props.$color].accentScale[0]};
border: 1px solid ${props.$colorPalette[props.$color].grayScale[5]};
`;
}}
`;
const StyledContainer = styled.div<CodePreviewStyleProps>`
display: block;
border-radius: 0 0 0.5rem 0.5rem;
padding: 0.5rem 2rem;
pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
code {
font-size: 14px;
font-family: "Source Code Pro", monospace;
}
}
${(props) => {
return `
background-color: ${props.$colorPalette[props.$color].accentScale[4]};
border: 1px solid ${props.$colorPalette[props.$color].grayScale[5]};
`;
}}
`;
const StyledSyntaxHighlighter = styled(
SyntaxHighlighter
)<CodePreviewStyleProps>`
background-color: ${(props) =>
props.$colorPalette[props.$color].accentScale[4]} !important;
font-family: "Source Code Pro", monospace;
`;
|