import * as React from "react" ; import dynamic from "next/dynamic" ; import { _getStaticPaths , _getStaticProps , } from "../../../../src/utils/chapterPageMethods" ; import type { Context } from "../../../../src/utils/chapterPageMethods" ; import Footer from "../../../../src/components/Footer" ; import { ChapterProps } from "../../../../src/types/ChapterPage" ; import { useEditorContext } from "../../../../src/context/hooks" ; const Editor = dynamic ( ( ) => import ( "../../../../src/components/Editor" ) , { ssr : false , } ) ; export default function Chapter ( props ) { const { showAnswer , showDocument , resetState } = useEditorContext ( ) ; React . useEffect ( ( ) => { resetState ( ) ; } , [ props . currentChapterId ] ) ; const editorProps = { files : props . codeFiles , answerFile : props . answerFile , showAnswer , fileNameToEdit : props . fileNameToEdit , } ; return ( < div className = "app" > < main className = "flex-1 flex bg-white dark:bg-gray-800 text-gray-900 dark:text-white relative overflow-scroll" > < div className = { `flex-1 p-8 pb-0 box-border overflow-scroll markdown ${ ! showDocument ? "hidden md:flex" : "" }` } > < div className = "pb-12" dangerouslySetInnerHTML = { { __html : props . content } } /> < /div> < div className = { `flex-1 p-4 md:p-8 box-border overflow-hidden relative ${ showDocument ? "hidden md:flex" : "" }` } > < Editor { ... editorProps } / > < /div> < /main> < Footer { ... props } /> < /div>); } export async function getStaticProps ( context ) { return _getStaticProps ( context ) ; } export const getStaticPaths = ( ) => { return _getStaticPaths ( ) ; } ;