UI Component: Filtered List With Max-Highlight
Context
Implement a small web UI component (e.g., in a modern frontend framework) that receives an array of items with the shape { name: string, amount: number }. The component must render the list, support text and numeric filtering, and highlight the item name(s) whose amount is the maximum among the currently filtered items.
Requirements
-
Render the list of items.
-
Provide two filters:
-
Text search: case-insensitive substring match on name.
-
Minimum amount: numeric filter; only show items with amount ≥ minimum.
-
Within the currently filtered list:
-
Highlight the name(s) whose amount is the maximum.
-
Update the highlight in real time as search/filters change.
-
If multiple items share the maximum amount, highlight all corresponding names.
-
If the filtered list is empty, display a clear empty state and no highlight.
-
Explain your state management approach, how you compute the maximum efficiently after filtering, and the time/space complexity.
-
Describe test cases for edge conditions such as:
-
Empty input list
-
Very large lists
-
Ties for maximum
-
Non-ASCII names
-
Rapid typing in the search bar