capture a 'token' value

outerbase · Mar 9, 2023 · 64f90c8 · 64f90c8
1 parent 393d218
commit 64f90c8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/react-ezql/src/App.tsx b/src/react-ezql/src/App.tsx
@@ -6,6 +6,8 @@ const TRIGGERS = ['KeyK', 'Slash']
 
 function App() {
   const [shouldDisplayEzql, setShouldDisplayEzql] = useState(false)
+  const [token, setToken] = useState<string>('')
+
   const suggestions = ['How many books sold last week', 'How many new users signed up today']
 
   // listen for the trigger to display the modal
@@ -27,12 +29,21 @@ function App() {
 
   return (
     <>
-      <p>
+      <p className="text-center text-gray-400 my-2">
         Press <i>Command-K</i> to display EZQL, <i>Escape</i> to dismiss.
       </p>
 
+      <p className='mx-2 flex items-center'>
+        <label>Token</label>
+        <input
+          className="bg-gray-50 rounded-sm ml-4 border border-gray-200 p-1 flex-1"
+          onChange={(event) => setToken(event.target.value)}
+        />
+      </p>
+
       {shouldDisplayEzql && (
         <EzqlPrompt
+          token={token}
           setShouldDisplayEzql={setShouldDisplayEzql}
           suggestions={suggestions}
           didSubmitWithValue={(value) => {

diff --git a/src/react-ezql/src/components/ezql-prompt.tsx b/src/react-ezql/src/components/ezql-prompt.tsx
@@ -6,6 +6,7 @@ import { classNames } from '../lib/class-names'
 import styles from './ezql-prompt.module.css'
 
 export type EzqlPromptOpts = {
+  token: string
   setShouldDisplayEzql: (value: boolean) => void
   onResults: (data: object) => void
   didSubmitWithValue?: (query: string) => void
@@ -14,6 +15,7 @@ export type EzqlPromptOpts = {
 }
 
 export default function EzqlPrompt({
+  token,
   setShouldDisplayEzql,
   didSubmitWithValue,
   onResults,