Member directory

1"use client";2 3import { useId, useMemo, useState } from "react";4import { ArrowRight, Search, X } from "lucide-react";5 6export type DirectoryMember = {7  id: string;8  name: string;9  role: string;10  presence?: "online" | "away" | "offline";11};12 13export type MemberDirectoryProps = {14  members: DirectoryMember[];15  title?: string;16  initialCount?: number;17};18 19/** Compact roster that opens into a searchable directory. */20export function MemberDirectory({21  members,22  title = "Team directory",23  initialCount = 3,24}: MemberDirectoryProps) {25  const panelId = useId();26  const [expanded, setExpanded] = useState(false);27  const [query, setQuery] = useState("");28  const shown = useMemo(() => {