Code MultiLineRenderer.tsx

0% Statements 0/4

100% Branches 0/0

0% Functions 0/3

0% Lines 0/4

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Box, Flex } from "@chakra-ui/react";
import type { FunctionComponent } from "react";
import type { RendererProps } from "./types";
import { CopyButton } from "../CopyButton";
 
export const MultiLineRenderer: FunctionComponent<RendererProps> = ({
  code,
  tokens,
  getLineProps,
  getTokenProps,
}) => (
  <>
    <Flex
      align="center"
      bg="rgba(0, 124, 253, 0.15)"
      borderTopRadius="md"
      justify="flex-end"
      px={2}
      py={1}
    >
      <CopyButton value={code} />
    </Flex>
    <Box overflowX="auto" p={2}>
      {tokens.map((line, i) => (
        <div key={i} {...getLineProps({ line, key: i })}>
          {line.map((token, key) => (
            <Box
              as="span"
              key={key}
              // wordWrap is not supported as a style prop for some reason
              sx={{ wordWrap: "normal" }}
              {...getTokenProps({ token, key })}
            />
          ))}
        </div>
      ))}
    </Box>
  </>
);