extract and merge Code component

Merges "Code" component from within MDXComponents to recently added UI/docs/Code.tsx, merging and cleaning up conflicts.

Moves all syntax highlighter logic to this component.

src/components/MDXComponents.tsx

@@ -1,72 +1,11 @@
-import { Flex, Heading, Link, Stack, Table, Text, useColorMode } from '@chakra-ui/react';
+import { Flex, Heading, Link, Stack, Table, Text } from '@chakra-ui/react';
 import NextLink from 'next/link';
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { nightOwl, prism } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-
-// import { Code } from './UI/docs'
-
-import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
-import go from 'react-syntax-highlighter/dist/cjs/languages/prism/go';
-import graphql from 'react-syntax-highlighter/dist/cjs/languages/prism/graphql';
-import java from 'react-syntax-highlighter/dist/cjs/languages/prism/java';
-import javascript from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript';
-import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json';
-import python from 'react-syntax-highlighter/dist/cjs/languages/prism/python';
-import sh from 'react-syntax-highlighter/dist/cjs/languages/prism/shell-session';
-import solidity from 'react-syntax-highlighter/dist/cjs/languages/prism/solidity';
-import swift from 'react-syntax-highlighter/dist/cjs/languages/prism/swift';
 
+import { Code } from './UI/docs'
 import { textStyles } from '../theme/foundations';
-import { getProgrammingLanguageName } from '../utils';
-
-// syntax highlighting languages supported
-SyntaxHighlighter.registerLanguage('bash', bash);
-SyntaxHighlighter.registerLanguage('terminal', bash);
-SyntaxHighlighter.registerLanguage('go', go);
-SyntaxHighlighter.registerLanguage('graphql', graphql);
-SyntaxHighlighter.registerLanguage('java', java);
-SyntaxHighlighter.registerLanguage('javascript', javascript);
-SyntaxHighlighter.registerLanguage('json', json);
-SyntaxHighlighter.registerLanguage('python', python);
-SyntaxHighlighter.registerLanguage('sh', sh);
-SyntaxHighlighter.registerLanguage('solidity', solidity);
-SyntaxHighlighter.registerLanguage('swift', swift);
 
 const { header1, header2, header3, header4 } = textStyles;
 
-const Code = ({ className, children, ...code }: any) => {
-  const { colorMode } = useColorMode();
-  const isDark = colorMode === 'dark';
-  const isTerminal = className?.includes('terminal') ;
-  if (code.inline)
-    return (
-      <Text
-        as='span'
-        padding='0.125em 0.25em'
-        color='primary'
-        background='code-bg'
-        borderRadius='0.25em'
-        fontFamily='code'
-        fontSize='sm'
-        overflowY='scroll'
-      >
-        {children[0]}
-      </Text>
-    );
-  if (className?.startsWith('language-')) {
-    return (
-      <SyntaxHighlighter
-        language={getProgrammingLanguageName(className)}
-        style={isTerminal || isDark ? nightOwl : prism} // TODO: Update with code light/dark color themes
-        customStyle={{ borderRadius: '0.5rem', padding: '1rem' }}
-      >
-        {children}
-      </SyntaxHighlighter>
-    );
-  }
-  return <Stack>{children[0]}</Stack>;
-};
-
 const MDXComponents = {
   // paragraphs
   p: ({ children }: any) => {

src/components/UI/docs/Code.tsx

@@ -1,38 +1,82 @@
 // Libraries
-import { Code as ChakraCode, Stack, Text } from '@chakra-ui/react';
-import { FC } from 'react';
+import { Code as ChakraCode, Stack, Text, useColorMode } from '@chakra-ui/react';
+import { nightOwl, prism } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+
+// Constants, utilities
+import { CLASSNAME_PREFIX } from '../../../constants';
+import { getProgrammingLanguageName } from '../../../utils';
+
+// Programming lang syntax highlighters
+import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
+import go from 'react-syntax-highlighter/dist/cjs/languages/prism/go';
+import graphql from 'react-syntax-highlighter/dist/cjs/languages/prism/graphql';
+import java from 'react-syntax-highlighter/dist/cjs/languages/prism/java';
+import javascript from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript';
+import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json';
+import python from 'react-syntax-highlighter/dist/cjs/languages/prism/python';
+import sh from 'react-syntax-highlighter/dist/cjs/languages/prism/shell-session';
+import solidity from 'react-syntax-highlighter/dist/cjs/languages/prism/solidity';
+import swift from 'react-syntax-highlighter/dist/cjs/languages/prism/swift';
+
+// syntax highlighting languages supported
+SyntaxHighlighter.registerLanguage('bash', bash);
+SyntaxHighlighter.registerLanguage('terminal', bash);
+SyntaxHighlighter.registerLanguage('go', go);
+SyntaxHighlighter.registerLanguage('graphql', graphql);
+SyntaxHighlighter.registerLanguage('java', java);
+SyntaxHighlighter.registerLanguage('javascript', javascript);
+SyntaxHighlighter.registerLanguage('json', json);
+SyntaxHighlighter.registerLanguage('python', python);
+SyntaxHighlighter.registerLanguage('sh', sh);
+SyntaxHighlighter.registerLanguage('solidity', solidity);
+SyntaxHighlighter.registerLanguage('swift', swift);
+
 
 interface Props {
-  code: any;
+  className: string
+  children: React.ReactNode
+  [key: string]: any
 }
-
-export const Code: FC<Props> = ({ code }) => {
+export const Code: React.FC<Props> = ({ className, children, ...code }: any) => {
+  const { colorMode } = useColorMode();
+  const isDark = colorMode === 'dark';
+  const isTerminal = className?.includes('terminal') ;
+  if (code.inline)
     return (
-    !!code.inline ?
-      (
       <Text
         as='span'
-          background='code-bg'
+        px={1}
+        color='primary'
+        bg='code-bg'
+        borderRadius='0.25em'
         textStyle='inline-code-snippet'
-          pb={2}
-          mb={-2}
       >
-          {code.children[0]}
+        {children[0]}
       </Text>
-      )
-    : 
-      (
+    );
+  if (isTerminal)
+      return (
         <Stack>
           <ChakraCode
             overflow='auto'
             p={6}
-            background='code-bg-contrast'
-            textStyle='code-block'
-            color='code-text'
+            background='terminal-bg'
+            color='terminal-text'
           >
-            {code.children[0]}
+            {children[0]}
           </ChakraCode>
         </Stack>
-      )
       );
+  if (className?.startsWith(CLASSNAME_PREFIX))
+    return (
+      <SyntaxHighlighter
+        language={getProgrammingLanguageName(className)}
+        style={isDark ? nightOwl : prism}
+        customStyle={{ borderRadius: '0.5rem', padding: '1rem' }}
+      >
+        {children}
+      </SyntaxHighlighter>
+    );
+  return <Stack>{children[0]}</Stack>;
 };