Added avatar for host selection

ecency · Dec 7, 2024 · e13331a · e13331a
1 parent 9888f28
commit e13331a
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/src/app/waves/_components/waves-host-selection.tsx b/src/app/waves/_components/waves-host-selection.tsx
@@ -1,9 +1,10 @@
 import { useMemo } from "react";
 import { AVAILABLE_THREAD_HOSTS } from "@/features/waves";
 import { WavesNavigationLayout } from "@/app/waves/_components/waves-navigation-layout";
-import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from "@ui/dropdown";
+import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
 import { Button } from "@ui/button";
 import { UilApps } from "@tooni/iconscout-unicons-react";
+import { UserAvatar } from "@/features/shared";
 
 interface Props {
   host: string;
@@ -24,9 +25,14 @@ export function WavesHostSelection({ host, setHost }: Props) {
         </DropdownToggle>
         <DropdownMenu align="right">
           {availableHosts.map((item, i) => (
-            <DropdownItem name={item} onClick={() => setHost(item)} title={item} key={item}>
-              {item}
-            </DropdownItem>
+            <DropdownItemWithIcon
+              icon={<UserAvatar username={item} size="small" />}
+              name={item}
+              onClick={() => setHost(item)}
+              title={item}
+              key={item}
+              label={item}
+            />
           ))}
         </DropdownMenu>
       </Dropdown>