feat: search project & workspace members (#2590)

* feat: search project & workspace members

* chore: formatting

web/pages/[workspaceSlug]/settings/members.tsx

@@ -12,10 +12,12 @@ import { SendWorkspaceInvitationModal, WorkspaceMembersList } from "components/w
 import { Button } from "@plane/ui";
 // types
 import type { NextPage } from "next";
+// icons
+import { Search } from "lucide-react";
 
 const MembersSettings: NextPage = () => {
   const [inviteModal, setInviteModal] = useState(false);
-
+  const [searchQuery, setSearchQuery] = useState<string>("");
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -35,11 +37,21 @@ const MembersSettings: NextPage = () => {
         <section className="pr-9 py-8 w-full overflow-y-auto">
           <div className="flex items-center justify-between gap-4 py-3.5 border-b-[0.5px] border-custom-border-200">
             <h4 className="text-xl font-medium">Members</h4>
+            <div className="flex gap-1 items-center justify-start ml-auto text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
+              <Search className="h-3.5 w-3.5" />
+              <input
+                className="max-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
+                placeholder="Search"
+                value={searchQuery}
+                autoFocus={true}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
             <Button variant="primary" size="sm" onClick={() => setInviteModal(true)}>
               Add Member
             </Button>
           </div>
-          <WorkspaceMembersList />
+          <WorkspaceMembersList searchQuery={searchQuery} />
         </section>
       </WorkspaceSettingLayout>
     </AppLayout>