import * as React from "react" ; import Link from "next/link" ; import { getChapterProps , getLessons } from "../../src/lib/file" ; import type { Context } from "../../src/utils/chapterPageMethods" ; import { getStartFileProps } from "../../src/lib/markdown" ; type CompletedProps = { firstChapterId : string | undefined ; lessonId : string ; title : string ; description : string ; body : any ; } ; export default function Start ( { firstChapterId , lessonId , title , description , body , } ) { return ( < div className = "page" > < main className = "flex flex-col items-center relative relative w-full max-w-3xl mx-auto mt-16" > < div className = "w-full flex flex-col items-center w-full p-16 rounded-xl mb-64" > < h1 className = "text-8xl font-semibold	text-center mb-8" > ⌨ ️ < /h1> < h1 className = "start-title" > { title } < /h1> < p className = "start-description" > { description } < /p> < div className = "flex flex-col items-center mt-16" > < div className = "mb-4 markdown" dangerouslySetInnerHTML = { { __html : body } } /> < Link href = { `/lesson/${ lessonId }/chapter/${ firstChapterId }` } > < a className = { `p-2 box-border flex items-center justify-center rounded-md bg-black dark:bg-white bg-opacity-5 dark:bg-opacity-5 hover:bg-opacity-10 dark:hover:bg-opacity-10 cursor-pointer` } > Start Chapter { firstChapterId } < /a> < /Link> < /div> < /div> < /main> < /div>); } export async function getStaticProps ( context ) { const { params : { lessonId } , } = context ; const { firstChapter } = getChapterProps ( lessonId ) ; const { title , description , body } = getStartFileProps ( lessonId ) ; return { props : { firstChapterId : firstChapter ?. id , lessonId , title , description , body , } , } ; } export const getStaticPaths = ( ) => { const lessons = getLessons ( ) ; let paths = [ ] ; lessons . map ( ( lesson ) => { paths . push ( `/lesson/${ lesson . id }` ) ; } ) ; return { paths : paths , fallback : false , } ; } ;