@tikpage/reactjs-popup/docs/src/template/Template.js

React Popup Component - Modals,Tooltips and Menus — All in one

import React from 'react';
import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
import {Link, graphql} from 'gatsby';
import {MDXProvider} from '@mdx-js/react';
import {MDXRenderer} from 'gatsby-plugin-mdx';
import mdxComponents from '../components/mdx';

import Layout from '../components/Layout';
import Sidebar from '../components/Sidebar';

import SEO from '../components/SEO';

export default ({data: {mdx}, pageContext: {next, prev}}) => (
  <Layout>
    <SEO location={mdx.frontmatter.path}>{mdx.frontmatter.title}</SEO>
    <div className="main">
      <Sidebar />
      <div className="markdown markdown-body">
        <a
          className=" edit-page"
          href="https://github.com/yjose/reactjs-popup/tree/master/docs/src/mdPages/">
          EDIT
        </a>

        <MDXProvider components={mdxComponents}>
          <MDXRenderer>{mdx.body}</MDXRenderer>
        </MDXProvider>

        {/* <MDXProvider components={{code: MyCodeComponent}}>
          <MDXRenderer>{mdx.code.body}</MDXRenderer>
        </MDXProvider> */}
        <div className="margin-top--xl margin-bottom--lg">
          <nav className="pagination-nav">
            <div className="pagination-nav__item">
              {prev && (
                <Link className="pagination-nav__link" to={`/${prev.path}/`}>
                  <h5 className="pagination-nav__link--sublabel">Previous</h5>
                  <h4 className="pagination-nav__link--label">
                    « {prev.name}{' '}
                  </h4>
                </Link>
              )}
            </div>
            <div className="pagination-nav__item pagination-nav__item--next">
              {next && (
                <Link className="pagination-nav__link" to={`/${next.path}/`}>
                  <h5 className="pagination-nav__link--sublabel">Next</h5>
                  <h4 className="pagination-nav__link--label">{next.name} »</h4>
                </Link>
              )}
            </div>
          </nav>
        </div>
      </div>

      <div id="carbon_container">
        <script
          async
          type="text/javascript"
          src="//cdn.carbonads.com/carbon.js?serve=CK7D52QE&placement=react-popupelazizicom"
          id="_carbonads_js"
        />
      </div>
    </div>
  </Layout>
);

export const pageQuery = graphql`
  query($id: String!) {
    mdx(id: {eq: $id}) {
      id
      frontmatter {
        path
        title
      }
      body
    }
  }
`;