feat: add usage info for each component

src/components/InlineCodeSnippet.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import github from 'prism-react-renderer/themes/github';
+import styles from './InlineCodeSnippet.module.scss';
+import cx from 'classnames';
+
+const InlineCodeSnippet = ({ children, language }) => {
+  return (
+    <Highlight
+      {...defaultProps}
+      theme={github}
+      code={children}
+      language={language}
+    >
+      {({ style, className, tokens, getLineProps, getTokenProps }) => (
+        <pre
+          className={cx(styles.container, className)}
+          style={{ ...style, background: '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;

src/components/InlineCodeSnippet.module.scss

@@ -0,0 +1,3 @@
+.container {
+  margin: 0;
+}

src/templates/ReferenceTemplate.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
+import InlineCodeSnippet from '../components/InlineCodeSnippet';
 import Container from '../components/Container';
 import Layout from '../components/Layout';
 import Sidebar from '../components/Sidebar';
@@ -28,6 +29,10 @@ const ReferenceTemplate = ({ data }) => {
         />
         <main className={styles.content}>
           <h1>{component}</h1>
+          <section>
+            <h2>Usage</h2>
+            <InlineCodeSnippet language="js">{`import { ${component} } from 'nr1'`}</InlineCodeSnippet>
+          </section>
         </main>
       </Container>
     </Layout>