5 files changed, 52 insertions, 28 deletions
diff --git a/src/App.module.css b/src/App.module.css
index 3b75e8c..74f3339 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -34,10 +34,6 @@
   color: var(--red)
 }
 
-.examples {
-  margin-bottom: 20px;
-}
-
 .editor {
   margin-bottom: 40px;
 }
diff --git a/src/App.tsx b/src/App.tsx
index 905149e..9e78af3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,28 +1,9 @@
-import { useExamples } from "./api"
 import styles from "./App.module.css"
 import Editor from "./Editor"
 import Tutorial from "./Tutorial"
 import icon from "./favicon.png"
 
 const App = () => {
-  const examples = useExamples()
-
-  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":
-        return examples.data.map((example) =>
-          <div key={example.id}>{example.title}</div>,
-        )
-    }
-  }
-
   return (
     <div className={styles.app}>
       <header className={styles.header}>
@@ -34,9 +15,6 @@ const App = () => {
           <small>A Mere Stack Language</small>
         </div>
       </header>
-      <div className={styles.examples}>
-        {renderExamples()}
-      </div>
       <div className={styles.editor}><Editor /></div>
       <div className={styles.tutorial}><Tutorial /></div>
     </div>
diff --git a/src/Editor.module.css b/src/Editor.module.css
index 2116903..e0bb076 100644
--- a/src/Editor.module.css
+++ b/src/Editor.module.css
@@ -5,3 +5,15 @@
 .error {
   color: var(--red)
 }
+
+.examples {
+  margin-bottom: 20px;
+}
+
+:global(.ace_gutter) {
+  z-index: 0;
+}
+
+:global(#react-select-3-listbox) {
+  color: var(--dark-grey);
+}
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"
diff --git a/src/Tutorial.tsx b/src/Tutorial.tsx
index 20b4304..0fcdb12 100644
--- a/src/Tutorial.tsx
+++ b/src/Tutorial.tsx
@@ -48,7 +48,7 @@ const Tutorial = () => (
 
     <div className={styles.quote}>
       <pre>cond</pre>
-      <p>Consume three values (bool, phrase1, phrase2) from the stack. If bool is true,
+      <p>Consume three values (phrase2, phrase1, bool) from the stack. If bool is true,
         evaluate phrase1, otherwise evaluate phrase2.
       </p>
     </div>