Team Directory with Live Search

Build a team directory application in React with TypeScript. The app lets users browse, search, and filter team members across an organization.

Data:

• Fetches team members from /api/team which returns { members: Member[] } where each Member has id: string, name: string, email: string, department: string, role: string, location: string, avatar: string, and startDate: string.

Features:

1. Search bar -- search members by name or email (real-time filtering as the user types)
2. Department filter -- dropdown to filter by department (or "All Departments")
3. Location filter -- dropdown to filter by office location (or "All Locations")
4. Sort control -- sort by name, department, or start date
5. Member cards grid -- display filtered members as cards showing name, avatar, role, department, and location
6. Stats bar -- show count of displayed members out of total, and count of unique departments in the filtered results
7. Member detail modal -- clicking a card opens a modal with full member details; the modal can be closed by clicking outside or pressing Escape
8. Pagination -- show 12 members per page with page navigation

Users should be able to share a link that preserves the current search, filters, sort, and page number.

Output

Produce TypeScript/TSX files in a src/ directory:

• src/types.ts -- TypeScript type definitions
• src/hooks/useTeamMembers.ts -- custom hook to fetch team data
• src/components/TeamDirectory.tsx -- the main directory page
• src/components/SearchAndFilters.tsx -- search bar and filter controls
• src/components/MemberCard.tsx -- individual member card
• src/components/MemberGrid.tsx -- the grid of member cards
• src/components/MemberModal.tsx -- the detail modal
• src/components/StatsBar.tsx -- the filtered stats display
• src/components/Pagination.tsx -- page navigation
• src/App.tsx -- the app entry point

The code does not need to run against a real server. Do not include test files or build configuration.