#35Equalizer

Overview

Build a dynamic equalizer whose bars animate based on a changing array of values.

Requirements

• Render 12 bars (NUM_BARS = 12).
• Each bar must render 24 blocks vertically (BAR_HEIGHT = 24).
• Each block is represented visually as a small horizontal bar (h-1 w-8 rounded).
• The Equalizer component receives:
  • values: number[] → an array of 12 numbers, one per bar.
  • barHeight: number → number of blocks per bar (always 24).
• For each bar:
  • Blocks from 0 up to value - 1 must be active (colored).
  • Blocks above that must be inactive (bg-neutral-100).
• Active block color must be:
  • Red for values 1–8
  • Yellow for values 9–16
  • Green for values 17–24
• The top block has testid: bar-{i}-block-23
• The bottom block has testid: bar-{i}-block-0
• The App must:
  • Generate a new values array every 200ms (MS_INTERVAL = 200).
  • Each value must be a random number from 1 to 24.
  • Pass those values to <Equalizer /> so the animation updates.
• The layout must stay identical to the provided initial static markup.

Notes

• The equalizer animates only because React re-renders with new random values.
• Keep the rendering efficient: avoid unnecessary wrappers or recalculations.
• You can compute colors using a helper like color(height).
• Make sure the height of each bar matches the expected barHeight so tests pass.
• Maintain the exact data-testid structure — tests depend on it.
• The randomizer should run inside a useEffect with setInterval.

Tests

1. renders the app title
2. changes colors after interval
3. renders the correct number of bars
4. renders the correct number of blocks per bar
5. applies correct colors for active blocks