microphone switch and design improvements

www/app/transcripts/audioInputsDropdown.tsx

@@ -1,5 +1,3 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMicrophone } from "@fortawesome/free-solid-svg-icons";
 import React, { useEffect, useState } from "react";
 import Dropdown, { Option } from "react-dropdown";
 import "react-dropdown/style.css";
@@ -7,36 +5,34 @@ import "react-dropdown/style.css";
 const AudioInputsDropdown: React.FC<{
   audioDevices: Option[];
   disabled: boolean;
+  hide: () => void;
   setDeviceId: React.Dispatch<React.SetStateAction<string | null>>;
-}> = ({ audioDevices, disabled, setDeviceId }) => {
+}> = (props) => {
   const [ddOptions, setDdOptions] = useState<Option[]>([]);
 
   useEffect(() => {
-    if (audioDevices) {
-      setDdOptions(audioDevices);
-      setDeviceId(audioDevices.length > 0 ? audioDevices[0].value : null);
+    if (props.audioDevices) {
+      setDdOptions(props.audioDevices);
+      props.setDeviceId(
+        props.audioDevices.length > 0 ? props.audioDevices[0].value : null,
+      );
     }
-  }, [audioDevices]);
+  }, [props.audioDevices]);
 
   const handleDropdownChange = (option: Option) => {
-    setDeviceId(option.value);
+    props.setDeviceId(option.value);
+    props.hide();
   };
 
-  if (audioDevices?.length > 0) {
-    return (
-      <div className="flex w-full items-center">
-        <FontAwesomeIcon icon={faMicrophone} className="p-2" />
-        <Dropdown
-          options={ddOptions}
-          onChange={handleDropdownChange}
-          value={ddOptions[0]}
-          className="flex-grow"
-          disabled={disabled}
-        />
-      </div>
-    );
-  }
-  return null;
+  return (
+    <Dropdown
+      options={ddOptions}
+      onChange={handleDropdownChange}
+      value={ddOptions[0]}
+      className="flex-grow w-full"
+      disabled={props.disabled}
+    />
+  );
 };
 
 export default AudioInputsDropdown;