Implement a React UI that lets users multi-select colors from a dropdown and view details.
You are given a JavaScript object where each key is a color name (or id) and the value is an object of properties for that color.
Example input:
const colorsByName = {
red: { hex: "#FF0000", rgb: "255,0,0", family: "warm", contrastOnWhite: "AA" },
green: { hex: "#00FF00", rgb: "0,255,0", family: "cool", contrastOnWhite: "A" },
blue: { hex: "#0000FF", rgb: "0,0,255", family: "cool", contrastOnWhite: "AAA" },
// ... potentially many more
};
Requirements:
-
Render a dropdown (select-like) control that, when opened, shows a list of all colors.
-
Each color in the list is selectable (multi-select). The UI should make it clear which colors are currently selected.
-
Show a summary near the control:
X color(s) selected
.
-
Below the control, render a table showing the properties of all selected colors.
-
Each row corresponds to a selected color.
-
Columns correspond to the properties (include the color name plus each property key).
-
Handle basic UX concerns:
-
Toggling a selected item unselects it.
-
Closing/opening the dropdown works reliably.
-
Reasonable behavior when no colors are selected.
Discuss any trade-offs you make (state shape, rendering performance with large lists, accessibility).