WIP

src/RoomButton.jsx

@@ -10,6 +10,8 @@ import { ReactComponent as SettingsIcon } from "./icons/Settings.svg";
 import { ReactComponent as GridIcon } from "./icons/Grid.svg";
 import { ReactComponent as SpeakerIcon } from "./icons/Speaker.svg";
 import { ReactComponent as ScreenshareIcon } from "./icons/Screenshare.svg";
+import { ReactComponent as ChevronIcon } from "./icons/Chevron.svg";
+import { useEffect } from "react";
 
 export function RoomButton({ on, className, children, ...rest }) {
   return (
@@ -22,19 +24,72 @@ export function RoomButton({ on, className, children, ...rest }) {
   );
 }
 
-export function MicButton({ muted, ...rest }) {
+export function DropdownButton({ onChange, options, children }) {
+  const buttonRef = useRef();
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    function onClick() {
+      if (open) {
+        setOpen(false);
+      }
+    }
+
+    window.addEventListener("click", onClick);
+
+    return () => {
+      window.removeEventListener("click", onClick);
+    };
+  }, [open]);
+
   return (
-    <RoomButton {...rest} on={muted}>
-      {muted ? <MuteMicIcon /> : <MicIcon />}
-    </RoomButton>
+    <div className={styles.dropDownButtonContainer}>
+      {children}
+      <button
+        ref={buttonRef}
+        className={styles.dropdownButton}
+        onClick={() => setOpen(true)}
+      >
+        <ChevronIcon />
+      </button>
+      {open && (
+        <div className={styles.dropDownContainer}>
+          <ul>
+            {options.map((item) => (
+              <li
+                key={item.value}
+                className={classNames({
+                  [styles.dropDownActiveItem]: item.value === value,
+                })}
+                onClick={() => onChange(item)}
+              >
+                {item.label}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
   );
 }
 
-export function VideoButton({ enabled, ...rest }) {
+export function MicButton({ muted, onChange, value, options, ...rest }) {
   return (
-    <RoomButton {...rest} on={enabled}>
-      {enabled ? <DisableVideoIcon /> : <VideoIcon />}
-    </RoomButton>
+    <DropdownButton onChange={onChange} options={options} value={value}>
+      <RoomButton {...rest} on={muted}>
+        {muted ? <MuteMicIcon /> : <MicIcon />}
+      </RoomButton>
+    </DropdownButton>
+  );
+}
+
+export function VideoButton({ enabled, onChange, value, ...rest }) {
+  return (
+    <DropdownButton onChange={onChange} options={options} value={value}>
+      <RoomButton {...rest} on={enabled}>
+        {enabled ? <DisableVideoIcon /> : <VideoIcon />}
+      </RoomButton>
+    </DropdownButton>
   );
 }