</Route>

{/* Completed */}

<Route path="Tutorial.Completed">

<CompletedPagesend={send}context={context} />

<CompletedPage context={context} />

</Route>

</Router>

</Workspace>

</li>

</ol>

</Panel>

<Panel title="Contact">

We'd love to hear your comments, requests, issues, questions - reach out at{' '}

<a href="mailto:coderoadapp@gmail.com">coderoadapp@gmail.com</a>.

<Panel title="Feedback">

<p>

Find a bug? Want to request a feature? Post an issue at{' '}

<a href="https://github.com/coderoad/coderoad-vscode">https://github.com/coderoad/coderoad-vscode</a>

</p>

</Panel>

</Collapse>

)

interface Props {

context: T.MachineContext

send(action: T.Action | string): void

}

const CompletedPage = (props: Props) => {

const selectNewTutorial = () => {

props.send('SELECT_TUTORIAL')

}

return (

<div css={styles.page}>

<h1>Tutorial Complete!</h1>

<div css={styles.section}>

<p>Thank you for demoing the CodeRoadbeta!</p>

<p>Thank you for demoing the CodeRoadpreview!</p>

</div>

<div css={styles.section}>

<h3>Subscribe!</h3>

</div>

<div css={styles.section}>

<h3>Contact Us</h3>

<p>We'd love to hear your comments, ideas & feedback.</p>

<p>We'd love to hear your comments,issues,ideas & feedback.</p>

<p>

Reach out at <a href="mailto:coderoadapp@gmail.com">coderoadapp@gmail.com</a>!

Reach out at{' '}

<a href="https://github.com/coderoad/coderoad-vscode">https://github.com/coderoad/coderoad-vscode</a>!

</p>

</div>

<div css={styles.section}>

<h3>Continue</h3>

<p>To try another tutorial, open a new VSCode workspace and launch the CodeRoad app</p>

<div css={styles.buttonContainer}>

<Button onClick={selectNewTutorial}>Return to Tutorial List</Button>

</div>

</div>

</div>

)