import * as React from "react" ; import Link from "next/link" ; import { getLessonProps , getLessons } from "../../../src/lib/file" ; import type { Context } from "../../../src/utils/chapterPageMethods" ; import { getCompletedFileProps } from "../../../src/lib/markdown" ; type CompletedProps = { nextLessonId : string | undefined ; lessonId : string ; title : string ; description : string ; body : any ; } ; export default function Completed ( { nextLessonId , 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 = "completed-title" > { title } < /h1> < p className = "completed-description" > { description } < /p> < div className = "flex flex-col items-center mt-16" > < div className = "mb-4 markdown" dangerouslySetInnerHTML = { { __html : body } } /> { nextLessonId ? ( < Link href = { `/lesson/${ parseInt ( lessonId ) + 1 }` } > < a className = "button button-default" > Start Lesson { nextLessonId } < /a> < /Link>) : null} < /div> < div className = "flex mt-8 pt-4 border-t border-gray-200 dark:border-gray-700" > < Link href = "https://twitter.com/share?ref_src=twsrc%5Etfw" > < a className = "button button-blue" data - show - count = "false" > Share on Twitter < /a> < /Link> < /div> < /div> < /main> < /div>); } export async function getStaticProps ( context ) { const { params : { lessonId } , } = context ; const { isLastLesson , nextLesson } = getLessonProps ( lessonId ) ; const { title , description , body } = getCompletedFileProps ( lessonId ) ; return { props : { nextLessonId : isLastLesson ? null : nextLesson ?. id , lessonId , title , description , body , } , } ; } export const getStaticPaths = ( ) => { const lessons = getLessons ( ) ; let paths = [ ] ; lessons . map ( ( lesson ) => { paths . push ( `/lesson/${ lesson . id }/completed` ) ; } ) ; return { paths : paths , fallback : false , } ; } ;