create current chapter variable

Author: Allicolyer

packages/gatsby-theme/src/components/templates/Tutorial.tsx

@@ -8,6 +8,7 @@ import { TutorialMdxQuery } from '../../graphqlTypes';
 import { HideOnTablet, ShowOnTablet } from '../../utils/responsive';
 import { Flex, Box } from '../shared/base';
 import { optionalChaining } from '../../utils/helpers';
+import { Button } from '../shared/base';
 
 type TutorialLayoutProps = { data: TutorialMdxQuery } & RouterProps;
 
@@ -28,6 +29,8 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
     ) || [];
   const { location } = props;
 
+  const currentChapterNumber = chapters.indexOf(pageTitle) + 1;
+
   return (
     <Layout location={location}>
       <ShowOnTablet>
@@ -54,6 +57,10 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
       <ShowOnTablet>
         <MDXRenderer>{data!.mdx!.code!.body}</MDXRenderer>
       </ShowOnTablet>
+      <Button onClick={() => console.log(currentChapterNumber)}>
+        {' '}
+        Next Chapter
+      </Button>
     </Layout>
   );
 };