import React, { useState, useEffect } from "react"; import { graphql } from "gatsby"; import useDarkMode from "use-dark-mode"; import { MDXRenderer } from "gatsby-plugin-mdx"; import { lightTheme, darkTheme } from "../themes/default"; import Layout from "../layouts"; import NextAndPrev from "../components/NextAndPrev"; interface IProps { pageContext: { slug: string; next: any; prev: any; }; data: any; } const DefaultTemplate: React.FC<IProps> = ({ children, pageContext, data }) => { const page = data.mdx; return ( <> <MDXRenderer slug={page.fields.slug}>{page.body}</MDXRenderer> <NextAndPrev prev={pageContext.prev} next={pageContext.next} /> </> ); }; export default DefaultTemplate; export const pageQuery = graphql` query($path: String!) { mdx(fields: { slug: { eq: $path } }) { body excerpt fields { slug } frontmatter { title } } } `;