Implement a Camera List UI from a Defined Visual Contract

Implement a camera-list UI in React with careful layout, spacing, and state presentation. ### Constraints & Assumptions The original visual reference is unavailable, so this practice exercise uses an explicit replacement layout and does not claim pixel equivalence to the interview. Receive `cameras`, an array of `{id,name,location,status,previewUrl}` with unique IDs and status `online` or `offline`. Render a responsive card grid, preserve input order, show name/location/status, use a 16:9 preview, and expose a selection callback. Include empty and loading states. No network fetch is required inside the component. ### Clarifying Questions What are the target viewport sizes? How should offline or missing previews look? Is the whole card interactive? Which spacing and typography values come from the supplied design reference? ### What a Strong Answer Covers A reusable component, stable keys, responsive CSS, semantic controls, clear states, and a method for verifying a visual implementation against an actual reference. ### Follow-up Questions How would you diagnose a layout mismatch instead of changing CSS values randomly? How should long camera names and unavailable images behave? What would you virtualize for a very large list?