feat: audio quality and mute

src/routes/chat/VoiceChat/VoiceManagement.tsx

@@ -1,22 +1,49 @@
+import clsx from 'clsx';
 import React from 'react';
-import { VoiceInfo } from '../../../app/slices/voice';
+import { VoicingInfo } from '../../../app/slices/voice';
 import { useAppSelector } from '../../../app/store';
-import User from '../../../common/component/User';
+import Avatar from '../../../common/component/Avatar';
+import IconMic from '../../../assets/icons/mic.on.svg';
+import IconMicOff from '../../../assets/icons/mic.off.svg';
+// import User from '../../../common/component/User';
 
 type Props = {
-    info: VoiceInfo | null
+    info: VoicingInfo | null
 }
 
 const VoiceManagement = ({ info }: Props) => {
     const userData = useAppSelector(store => store.users.byId);
     if (!info) return null;
     const { context, id, members } = info;
+    const nameClass = clsx(`text-sm text-gray-500 max-w-[190px] truncate font-semibold dark:text-white`);
     return (
-        <div>
-            <ul>
+        <div className='w-full h-full py-2'>
+            <ul className='flex flex-col gap-2'>
                 {members.map((uid) => {
+                    const curr = userData[uid];
+                    if (!curr) return null;
                     return <li key={uid}>
-                        <User uid={uid} interactive={false} />
+                        <div className="flex items-center justify-between gap-6 ">
+                            <div className="flex items-center gap-2">
+                                <div className="w-8 h-8 flex shrink-0">
+                                    <Avatar
+                                        width={32}
+                                        height={32}
+                                        className="w-full h-full rounded-full object-cover"
+                                        src={curr.avatar}
+                                        name={curr.name}
+                                        alt="avatar"
+                                    />
+                                </div>
+                                <span className={nameClass} title={curr?.name}>
+                                    {curr?.name}
+                                </span>
+                            </div>
+                            <div className="flex items-center">
+                                <IconMic className="w-4" role="button" />
+                            </div>
+                        </div>
+                        {/* <User uid={uid} interactive={false} /> */}
                         {/* {userData[uid]?.name} */}
                     </li>;
                 })}