1 files changed, 39 insertions, 1 deletions
diff --git a/src/Editor.tsx b/src/Editor.tsx
index 41bf9ff..afce380 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -3,7 +3,8 @@ import "ace-builds/src-noconflict/mode-java"
 import "ace-builds/src-noconflict/theme-github"
 import { useState } from "react"
 import styles from "./Editor.module.css"
-import { APIResult, submitSource } from "./api"
+import { APIResult, submitSource, useExamples } from "./api"
+import Select from "react-select"
 
 const defaultSourceText = `define times2
     dup +
@@ -14,6 +15,7 @@ const defaultSourceText = `define times2
 `
 
 const Editor = () => {
+  const examples = useExamples()
   const [sourceText, setSourceText] = useState(defaultSourceText)
   const [result, setResult] = useState<APIResult<string, Error>>({ type: "not_yet_requested" })
   const onChange = setSourceText
@@ -23,6 +25,39 @@ const Editor = () => {
     setResult(result)
   }
 
+  const renderExamples = () => {
+    switch (examples.type) {
+      case "not_yet_requested":
+      case "loading":
+        return <div>Loading examples...</div>
+      case "failed":
+        return <div className={styles.error}>
+          An unexpected error occurred while loading examples. See console for details.
+        </div>
+      case "success": {
+        const options = examples.data.map(example => ({ value: example.content, label: example.title }))
+        const customStyles = {
+          option: (styles: any) => ({
+            ...styles,
+            cursor: "pointer",
+          }),
+          control: (styles: any) => ({
+            ...styles,
+            cursor: "pointer",
+          }),
+        }
+        return (
+          <Select
+            placeholder="Pick an example code snippet..."
+            options={options}
+            onChange={(val) => { setSourceText(val?.value as string) }}
+            styles={customStyles}
+          />
+        )
+      }
+    }
+  }
+
   const renderResults = () => {
     switch (result.type) {
       case "not_yet_requested":
@@ -53,6 +88,9 @@ const Editor = () => {
 
   return (
     <>
+      <div className={styles.examples}>
+        {renderExamples()}
+      </div>
       <AceEditor
         mode=""
         theme="github"