import { UserIcon } from '@heroicons/react/outline' import { useUsers } from 'web/hooks/use-users' import { User } from 'common/user' import { Fragment, useState } from 'react' import clsx from 'clsx' import { Menu, Transition } from '@headlessui/react' import { Avatar } from 'web/components/avatar' import { Row } from 'web/components/layout/row' export function FilterSelectUsers(props: { setSelectedUsers: (users: User[]) => void selectedUsers: User[] ignoreUserIds: string[] }) { const { ignoreUserIds, selectedUsers, setSelectedUsers } = props const users = useUsers() const [query, setQuery] = useState('') const filteredUsers = query === '' ? users : users.filter((user: User) => { return ( !selectedUsers.map((user) => user.name).includes(user.name) && !ignoreUserIds.includes(user.id) && user.name.toLowerCase().includes(query.toLowerCase()) ) }) return (