Traffic Light

Build a traffic light that cycles through its phases on a timer and loops forever: green, then yellow, then red, then back to green. Each phase stays lit for its own length of time — green and red linger, yellow is brief. The whole exercise is about driving a state machine from time itself: there's no button to click, the component advances on its own and must keep doing so cleanly without leaking timers.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

The light advances green → yellow → red → green … indefinitely, each phase lit for its configured duration.

Examples

t = 0s            green   (lit for 3s)
t = 3s            yellow  (lit for 1s)
t = 4s            red     (lit for 3s)
t = 7s            green   (and the cycle repeats)

Only one light is ever lit. The active phase decides which — the other two
are dimmed.

Notes

• One active phase at a time. Hold the current colour in state; render all three lights but only highlight the active one.
• Per-phase durations. Each colour is lit for a different length of time, so the timer's delay depends on the current colour — it isn't a fixed interval.
• Clean up the timer. Schedule the next transition in an effect and clear it on cleanup, or you'll stack overlapping timers and the cycle will speed up and glitch.
• Out of scope. No pedestrian button, no countdown numbers — just the looping light. (US light order is red→green→yellow; this exercise uses the simpler green→yellow→red cycle.)