invite member to house

src/components/ui/select-user.tsx

@@ -4,7 +4,7 @@ import { cn } from '@lib/utils';
 import { CaretDownIcon, MagnifyingGlassIcon } from '@phosphor-icons/react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-export type SelectUserItem = {
+type SelectUserItem = {
   id: string;
   name: string;
   email: string;
@@ -13,7 +13,7 @@ export type SelectUserItem = {
 const userLabel = (u: { name: string; email: string }) =>
   `${u.name} - ${u.email}`;
 
-export type SelectUserProps = {
+type SelectUserProps = {
   value: string;
   onValueChange: (userId: string) => void;
   values: SelectUserItem[];
@@ -27,6 +27,7 @@ export type SelectUserProps = {
   'aria-invalid'?: boolean;
   disabled?: boolean;
   className?: string;
+  selectKey?: 'id' | 'email';
 };
 
 export function SelectUser({
@@ -42,6 +43,7 @@ export function SelectUser({
   'aria-invalid': ariaInvalid,
   disabled = false,
   className,
+  selectKey = 'id',
 }: SelectUserProps) {
   const [open, setOpen] = useState(false);
   const [localQuery, setLocalQuery] = useState('');
@@ -53,7 +55,9 @@ export function SelectUser({
   const setSearchValue = useServerSearch ? onKeywordChange! : setLocalQuery;
 
   const selectedUser =
-    value != null && value !== '' ? values.find((u) => u.id === value) : null;
+    value != null && value !== ''
+      ? values.find((u) => u[selectKey] === value)
+      : null;
   const displayValue = selectedUser ? userLabel(selectedUser) : '';
 
   const filtered = useServerSearch
@@ -161,15 +165,16 @@ export function SelectUser({
                   key={u.id}
                   type="button"
                   role="option"
-                  aria-selected={value === u.id}
+                  aria-selected={value === u[selectKey]}
                   className={cn(
                     'hover:bg-accent hover:text-accent-foreground flex w-full cursor-pointer items-center rounded-md px-2 py-1.5 text-left text-xs/relaxed outline-none',
-                    value === u.id && 'bg-accent text-accent-foreground',
+                    value === u[selectKey] &&
+                      'bg-accent text-accent-foreground',
                   )}
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    handleSelect(u.id);
+                    handleSelect(u[selectKey]);
                   }}
                 >
                   {userLabel(u)}