ListDropdown Component

app/components/ListDropdown.tsx

@@ -0,0 +1,64 @@
+import { Fragment, useState } from 'react'
+import { Listbox, 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}[];
+}
+export const ListDropdown = ({
+  list
+}:ListDropdownProps) => {
+  const [selected, setSelected] = useState(list[0])
+
+  return (
+    <Listbox value={selected} onChange={setSelected}>
+      <div className="relative mt-1">
+        <Listbox.Button className="relative w-full h-10 cursor-pointer rounded-md bg-brand-secondary py-2 pl-3 pr-10 text-left outline-none outline-offset-0 transition-all duration-150 ease-in-out focus:outline-brand-primary sm:text-sm">
+          <span className="block truncate">{selected.name}</span>
+          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+            <FontAwesomeIcon icon={faChevronDown} aria-hidden="true"/>
+          </span>
+        </Listbox.Button>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-brand-secondary py-1 text-base shadow-lg focus:outline-none sm:text-sm">
+            {list.map((item, itemIdx) => (
+              <Listbox.Option
+                key={itemIdx}
+                className={({ active }) =>
+                  `relative cursor-pointer select-none py-2 pl-10 pr-4  text-white ${
+                    active ? 'bg-brand-secondary-400' : ''
+                  }`
+                }
+                value={item}
+              >
+                {({ selected }) => (
+                  <>
+                    <span
+                      className={`block truncate ${
+                        selected ? 'font-medium' : 'font-normal'
+                      }`}
+                    >
+                      {Object.values(item)[0]}
+                    </span>
+                    {selected ? (
+                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
+                        <FontAwesomeIcon icon={faCheck} aria-hidden="true"/>
+                      </span>
+                    ) : null}
+                  </>
+                )}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </Transition>
+      </div>
+    </Listbox>
+  )
+}

app/components/TransitionDialogue.tsx

@@ -37,7 +37,7 @@ export const TransitionDialogue = ({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className={twMerge("w-full max-w-md transform overflow-hidden rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all", className)}>
+                <Dialog.Panel className={twMerge("w-full max-w-md transform rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all", className)}>
                   {title && (
                     <Dialog.Title
                       as="h4"

app/components/index.tsx

@@ -8,6 +8,7 @@ import { H1, H2, H3, H4, H5, H6, P, Label} from "./Typography";
 import { ItemPicker } from "./ItemPicker";
 import { Textarea } from "./Textarea";
 import { TransitionDialogue } from "./TransitionDialogue";
+import { ListDropdown } from "./ListDropdown"
 import { LoadingBar } from "./LoadingBar";
 import { LoadingDots, LoadingDotsBricks, LoadingDotsTyping } from "./LoadingDots";
 
@@ -22,6 +23,7 @@ export {
   TransitionDialogue,
   Input,
   InputVector,
+  ListDropdown,
   LoadingBar,
   LoadingDots,
   LoadingDotsBricks,

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

@@ -7,10 +7,20 @@ import {
   Button,
   H5,
   Label,
+  ListDropdown,
   TransitionDialogue,
   Textarea
 } from "~/components";
 
+const testdata = [
+  { name: 'Wade Cooper' },
+  { name: 'Arlene Mccoy' },
+  { name: 'Devon Webb' },
+  { name: 'Tom Cook' },
+  { name: 'Tanya Fox' },
+  { name: 'Hellen Schmidt' },
+]
+
 export const DialogueTTS = ()=>{
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
   const handleClose = ()=> {
@@ -31,9 +41,11 @@ export const DialogueTTS = ()=>{
       isOpen={appUiState.diagloueTts.isOpen}
       onClose={handleClose}
     >
-      <>
-        <Label>Select a Voice</Label>
-        <div className="flex w-full justify-between">
+      <div className="flex flex-col">
+        <Label className="mb-1">Select a Voice</Label>
+        <ListDropdown list={testdata}/>
+
+        <div className="flex w-full justify-between mt-4">
           <Label>What would you like to say?</Label>
           <div className="flex gap-2 items-center">
             <FontAwesomeIcon className="text-brand-primary" icon={faShuffle}/>
@@ -41,6 +53,7 @@ export const DialogueTTS = ()=>{
           </div>
         </div>
         <Textarea
+          placeholder="Enter what you want the voice to say here."
         />
 
         <div className="mt-6 flex justify-end gap-2">
@@ -61,7 +74,7 @@ export const DialogueTTS = ()=>{
             Add to Lip Sync Track
           </Button>
         </div>
-      </>
+      </div>
     </TransitionDialogue>
   );
 };