fix Code interface

pull/26459/head^2
Paul Wackerow 2 years ago
parent f09d02aecd
commit f95192beb0
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
  1. 16
      src/components/MDXComponents.tsx
  2. 39
      src/components/UI/docs/Code.tsx

@ -1,7 +1,7 @@
import { Flex, Heading, Link, Stack, Table, Text } from '@chakra-ui/react'; import { Flex, Heading, Link, Stack, Table, Text } from '@chakra-ui/react';
import NextLink from 'next/link'; import NextLink from 'next/link';
import { Code } from './UI/docs' import { Code } from './UI/docs';
import { textStyles } from '../theme/foundations'; import { textStyles } from '../theme/foundations';
const { header1, header2, header3, header4 } = textStyles; const { header1, header2, header3, header4 } = textStyles;
@ -75,15 +75,13 @@ const MDXComponents = {
</Flex> </Flex>
), ),
// pre // pre
pre: ({ children }: any) => { pre: ({ children }: any) => (
return ( <Stack mb={5}>
<Stack mb={5}> <pre>{children}</pre>
<pre>{children}</pre> </Stack>
</Stack> ),
);
},
// code // code
code: Code code: ({ children, ...props }: any) => <Code {...props}>{children}</Code>
}; };
export default MDXComponents; export default MDXComponents;

@ -32,17 +32,17 @@ SyntaxHighlighter.registerLanguage('sh', sh);
SyntaxHighlighter.registerLanguage('solidity', solidity); SyntaxHighlighter.registerLanguage('solidity', solidity);
SyntaxHighlighter.registerLanguage('swift', swift); SyntaxHighlighter.registerLanguage('swift', swift);
interface Props { interface Props {
className: string className: string;
children: React.ReactNode children: string[];
[key: string]: any inline?: boolean;
} }
export const Code: React.FC<Props> = ({ className, children, ...code }: any) => { export const Code: React.FC<Props> = ({ className, children, inline }) => {
const { colorMode } = useColorMode(); const { colorMode } = useColorMode();
const isDark = colorMode === 'dark'; const isDark = colorMode === 'dark';
const isTerminal = className?.includes('terminal') ; const isTerminal = className?.includes('terminal');
if (code.inline) const [content] = children;
if (inline)
return ( return (
<Text <Text
as='span' as='span'
@ -52,22 +52,17 @@ export const Code: React.FC<Props> = ({ className, children, ...code }: any) =>
borderRadius='0.25em' borderRadius='0.25em'
textStyle='inline-code-snippet' textStyle='inline-code-snippet'
> >
{children[0]} {content}
</Text> </Text>
); );
if (isTerminal) if (isTerminal)
return ( return (
<Stack> <Stack>
<ChakraCode <ChakraCode overflow='auto' p={6} background='terminal-bg' color='terminal-text'>
overflow='auto' {content}
p={6} </ChakraCode>
background='terminal-bg' </Stack>
color='terminal-text' );
>
{children[0]}
</ChakraCode>
</Stack>
);
if (className?.startsWith(CLASSNAME_PREFIX)) if (className?.startsWith(CLASSNAME_PREFIX))
return ( return (
<SyntaxHighlighter <SyntaxHighlighter
@ -75,8 +70,8 @@ export const Code: React.FC<Props> = ({ className, children, ...code }: any) =>
style={isDark ? nightOwl : prism} style={isDark ? nightOwl : prism}
customStyle={{ borderRadius: '0.5rem', padding: '1rem' }} customStyle={{ borderRadius: '0.5rem', padding: '1rem' }}
> >
{children} {content}
</SyntaxHighlighter> </SyntaxHighlighter>
); );
return <Stack>{children[0]}</Stack>; return <Stack>{content}</Stack>;
}; };

Loading…
Cancel
Save