From 45e319a4b29d95ee15a80da95c6326faf2af124c Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Tue, 7 Jul 2020 23:31:31 -0700
Subject: [PATCH] feat: update api and component reference templates to use the
 code block for usage

---
 src/components/InlineCodeSnippet.js         | 43 ---------------------
 src/templates/ApiReferenceTemplate.js       |  4 +-
 src/templates/ComponentReferenceTemplate.js |  4 +-
 3 files changed, 4 insertions(+), 47 deletions(-)
 delete mode 100644 src/components/InlineCodeSnippet.js

diff --git a/src/components/InlineCodeSnippet.js b/src/components/InlineCodeSnippet.js
deleted file mode 100644
index a4a9f52b6..000000000
--- a/src/components/InlineCodeSnippet.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Highlight, { defaultProps } from 'prism-react-renderer';
-import lightTheme from 'prism-react-renderer/themes/github';
-import darkTheme from 'prism-react-renderer/themes/nightOwl';
-import styles from './InlineCodeSnippet.module.scss';
-import cx from 'classnames';
-import useDarkMode from 'use-dark-mode';
-
-const InlineCodeSnippet = ({ children, language }) => {
-  const darkMode = useDarkMode();
-
-  return (
-    <Highlight
-      {...defaultProps}
-      theme={darkMode.value ? darkTheme : lightTheme}
-      code={children}
-      language={language}
-    >
-      {({ style, className, tokens, getLineProps, getTokenProps }) => (
-        <pre
-          className={cx(styles.container, className)}
-          style={{ ...style, backgroundColor: 'none' }}
-        >
-          {tokens.map((line, i) => (
-            <div key={i} {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                <span key={key} {...getTokenProps({ token, key })} />
-              ))}
-            </div>
-          ))}
-        </pre>
-      )}
-    </Highlight>
-  );
-};
-
-InlineCodeSnippet.propTypes = {
-  children: PropTypes.node.isRequired,
-  language: PropTypes.string,
-};
-
-export default InlineCodeSnippet;
diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js
index 242aeabbb..bb29016cb 100644
--- a/src/templates/ApiReferenceTemplate.js
+++ b/src/templates/ApiReferenceTemplate.js
@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
-import InlineCodeSnippet from '../components/InlineCodeSnippet';
+import CodeBlock from '../components/CodeBlock';
 import Layout from '../components/Layout';
 import PageTitle from '../components/PageTitle';
 import Markdown from '../components/Markdown';
@@ -45,7 +45,7 @@ const ApiReferenceTemplate = ({ data }) => {
 
       <section className={templateStyles.section}>
         <h2 className={templateStyles.sectionTitle}>Usage</h2>
-        <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
+        <CodeBlock language="js">{usage}</CodeBlock>
       </section>
 
       {methods.length > 0 && (
diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js
index de72c227a..499b25f84 100644
--- a/src/templates/ComponentReferenceTemplate.js
+++ b/src/templates/ComponentReferenceTemplate.js
@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 
-import InlineCodeSnippet from '../components/InlineCodeSnippet';
+import CodeBlock from '../components/CodeBlock';
 import ReferenceExample from '../components/ReferenceExample';
 import Layout from '../components/Layout';
 import PageTitle from '../components/PageTitle';
@@ -63,7 +63,7 @@ const ComponentReferenceTemplate = ({ data }) => {
 
       <section className={templateStyles.section}>
         <h2 className={templateStyles.sectionTitle}>Usage</h2>
-        <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
+        <CodeBlock language="js">{usage}</CodeBlock>
       </section>
 
       {examples.length > 0 && (