Emoji Picker

Build an emoji picker as a single React component. Category tabs across the top switch which set of emoji you see; a search box filters emoji by name across every category at once; and clicking an emoji appends it to a running "Picked" line. It's a compact exercise in the one idea that runs through most UI: keep a little state, and derive what you render from it rather than storing the rendered list twice.

What you'll build

The starter renders the resting picture — the four tabs with Smileys active, an empty search box, the Smileys grid, and an empty Picked: line. Make it interactive:

1. Hold three pieces of state with useState: the activeCat string, the query string, and a picked array of chars.
2. Derive the shown list. When query is non-empty, filter every category's emoji by name; otherwise fall back to EMOJIS[activeCat]. Don't store the shown list in state — compute it during render.
3. Wire the three events. A tab click sets activeCat, typing sets query, and an emoji click appends its char to picked.

Examples

• Click Food → the grid swaps to apple, pizza, burger, donut, sushi. The tab highlights.
• Type pi → the grid shows just pizza (from Food), pulled out of its category because search spans all tabs. Clear it → back to the active category.
• Click pizza, then dog → the line reads Picked: 🍕🐶.

Notes

• Derive, don't duplicate. The shown grid is a function of query + activeCat; a second shown state would drift out of sync.
• Search overrides the tab. When there's a query, matches come from everywhere and the active-tab highlight drops — clear the query to fall back to the category.
• Picked is append-only. Each click pushes one char; the display is just picked.join('').
• The dark theme, tabs, grid, and search styling are already in styles.css — focus on the state.