fix Code interface

src/components/MDXComponents.tsx

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

src/components/UI/docs/Code.tsx

@@ -32,17 +32,17 @@ SyntaxHighlighter.registerLanguage('sh', sh);
 SyntaxHighlighter.registerLanguage('solidity', solidity);
 SyntaxHighlighter.registerLanguage('swift', swift);
 
-
 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 isDark = colorMode === 'dark';
-  const isTerminal = className?.includes('terminal') ;
+  const isTerminal = className?.includes('terminal');
-  if (code.inline)
+  const [content] = children;
+  if (inline)
     return (
       <Text
         as='span'
@@ -52,22 +52,17 @@ export const Code: React.FC<Props> = ({ className, children, ...code }: any) =>
         borderRadius='0.25em'
         textStyle='inline-code-snippet'
       >
-        {children[0]}
+        {content}
       </Text>
     );
   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))
     return (
       <SyntaxHighlighter
@@ -75,8 +70,8 @@ export const Code: React.FC<Props> = ({ className, children, ...code }: any) =>
         style={isDark ? nightOwl : prism}
         customStyle={{ borderRadius: '0.5rem', padding: '1rem' }}
       >
-        {children}
+        {content}
       </SyntaxHighlighter>
     );
-  return <Stack>{children[0]}</Stack>;
+  return <Stack>{content}</Stack>;
 };