hook up different ui elements to get ready for API hook up

app/components/ListDropdown.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import { Listbox, Transition } from '@headlessui/react'
 import { faCheck, faChevronDown } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -6,11 +6,16 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 interface ListDropdownProps {
   list: {[key: string] : string}[];
+  onSelect: (val:string)=>void;
 }
 export const ListDropdown = ({
-  list
+  list, onSelect
 }:ListDropdownProps) => {
-  const [selected, setSelected] = useState(list[0])
+  const [selected, setSelected] = useState(list[0]);
+  
+  useEffect(()=>{
+    onSelect(Object.values(selected)[0]);
+  }, [selected]);
 
   return (
     <Listbox value={selected} onChange={setSelected}>

app/components/ListSearchDropdown.tsx

@@ -1,13 +1,14 @@
-import { Fragment, useState } from 'react'
+import { Fragment, useState, useEffect } from 'react'
 import { Combobox, Transition } from '@headlessui/react'
 import { faCheck, faChevronDown } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 interface ListDropdownProps {
   list: {[key: string] : string}[];
+  onSelect: (val:string)=>void
 }
 export const ListSearchDropdown = ({
-  list
+  list, onSelect
 }:ListDropdownProps) => {
   const [selected, setSelected] = useState(list[0])
   const [query, setQuery] = useState('')
@@ -22,6 +23,9 @@ export const ListSearchDropdown = ({
             .includes(query.toLowerCase().replace(/\s+/g, ''))
         )
 
+  useEffect(()=>{
+    onSelect(Object.values(selected)[0]);
+  }, [selected]);
   return (
     <Combobox value={selected} onChange={setSelected}>
       <div className="relative mt-1">

app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx

@@ -1,5 +1,5 @@
 import { useContext, useState } from "react";
-import { faVolume, faShuffle } from "@fortawesome/pro-solid-svg-icons";
+import { faVolume, faShuffle, faPlay } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AppUiContext } from "../../contexts/AppUiContext";
 import { APPUI_ACTION_TYPES } from "../../reducers";
@@ -7,7 +7,6 @@ import {
   Button,
   H5,
   Label,
-  ListDropdown,
   ListSearchDropdown,
   TransitionDialogue,
   Textarea
@@ -21,15 +20,41 @@ const testdata = [
   { name: 'Tanya Fox' },
   { name: 'Hellen Schmidt' },
 ]
-
+type TtsState = {
+  voice: string;
+  text: string;
+  hasAudio: boolean;
+}
 export const DialogueTTS = ()=>{
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
+  const [ttsState, setTtsState] = useState<TtsState>({
+    voice:"",
+    text:"",
+    hasAudio:false
+  });
+
   const handleClose = ()=> {
     dispatchAppUiState({
       type: APPUI_ACTION_TYPES.CLOSE_DIALOGUE_TTS
     })
   };
 
+  const handleTextInput = (
+    e: React.ChangeEvent<HTMLTextAreaElement>
+  )=>{
+    setTtsState((curr)=>({
+      ...curr,
+      text: e.target.value,
+    }));
+  };
+
+  const handleOnSelect = (val:string)=>{
+    setTtsState((curr)=>({
+      ...curr,
+      voices: val,
+    }));
+  }
+
   return(
     <TransitionDialogue
       title={
@@ -44,7 +69,7 @@ export const DialogueTTS = ()=>{
     >
       <div className="flex flex-col">
         <Label className="mb-1">Select a Voice</Label>
-        <ListSearchDropdown  list={testdata}/>
+        <ListSearchDropdown list={testdata} onSelect={handleOnSelect}/>
 
         <div className="flex w-full justify-between mt-4">
           <Label>What would you like to say?</Label>
@@ -55,8 +80,19 @@ export const DialogueTTS = ()=>{
         </div>
         <Textarea
           placeholder="Enter what you want the voice to say here."
+          value={ttsState.text}
+          onChange={handleTextInput}
         />
-
+        <div className="mt-6 flex gap-2">
+          <Button
+            variant={ttsState.hasAudio ? "secondary" : "primary" }
+            disabled={ttsState.text === ""}
+            icon={faPlay}
+            // className="px-6 py-3.5"
+          >
+            Speak
+          </Button>
+        </div>
         <div className="mt-6 flex justify-end gap-2">
           <Button
             type="button"
@@ -68,6 +104,7 @@ export const DialogueTTS = ()=>{
           <Button
             type="button"
             variant="primary"
+            disabled={!ttsState.hasAudio}
             onClick={(e) => {
               console.log("Add to Lip Sync Track Triggered")
             }}