Implement a UI From a Figma Mock in React + TypeScript

Problem: Implement a UI From a Figma Mock Using React + TypeScript (Live Coding) You are given a Figma mock (a link or screenshots provided by the interviewer). Implement the UI using React + TypeScript within the allotted time. Requirements Layout & styling: Match the overall layout, spacing, and visual hierarchy from Figma (pixel-perfect is not required unless explicitly stated). Component decomposition: Split the page into reasonable, reusable components (e.g., Header, Sidebar, Card, List, Button, Modal). Type design: Define TypeScript types for key data structures and component props; avoid any. Interactions: Implement the main interactions indicated in the mock (e.g., selection/tabs, search filtering, form input, button clicks, modal open/close, selected states), based on what the interviewer provides. State management: Use React hooks (useState/useMemo/useEffect, etc.) with clear update logic. Robustness: Handle basic edge cases (empty list, no matches, invalid inputs). Input/Output Input: The Figma mock (link/screenshots) plus any verbal clarifications. Output: A runnable React + TypeScript implementation (components + styling). Constraints / Notes Whether UI libraries (MUI/Tailwind/Chakra) are allowed depends on the interviewer; assume no large UI library by default. Whether API calls are required depends on the interviewer; assume local mock data by default. Test Cases (Example Acceptance Checklist) This is primarily a UI implementation task; test cases are expressed as interaction checks. The actual checklist depends on the provided mock. On initial render, the main regions (top/side/content) match the mock structure. Clicking a list item correctly applies selected styling and updates the details panel. Typing into the search input filters the list; clearing restores all items. When filtering yields no items, an empty-state message is shown. Clicking the primary action button opens/closes a modal (if present in the mock). Example Input (Figma mock provided by interviewer) Output A working React+TypeScript UI matching the mock with specified interactions.