Feature: Display labeled era bands spanning date ranges

[thbst16]

Description

Hot zones provide background highlighting, but timelines often need clearly labeled eras that span date ranges with visible headers. This helps users understand the historical context of events.

Use Case

NFL history has distinct eras: "Leather Helmet Era" (1920-1940), "Post-War Growth" (1945-1959), "AFL Era" (1960-1969), "Super Bowl Era" (1967-present). These should appear as labeled bands above or below the event track.

Proposed Solution

• Add eras prop accepting array of { start, end, label, color, position }
• position can be 'above' | 'below' | 'background'
• Eras render as labeled horizontal bars with the time range
• Should support overlapping eras (e.g., "AFL Era" overlaps with start of "Super Bowl Era")

Example API

<Timeline
  data={data}
  eras={[
    { start: '1920', end: '1940', label: 'Leather Helmet Era', color: '#8B4513', position: 'above' },
    { start: '1967', end: '2025', label: 'Super Bowl Era', color: '#013369', position: 'above' },
  ]}
/>

---

Issue generated from user feedback while building an NFL history timeline