Allows users to select a range of years by clicking on an input field to reveal a dropdown of year options. This component includes features such as dynamically displaying different year ranges, selecting a start and end year, navigating between ranges, and visually highlighting the selected years.

Component Structure

1. Input Field:

   • The <input> field is the main trigger for the year range picker. Clicking on this input shows the dropdown menu where the user can select a range of years.
   • The input field is readonly, meaning users can't type into it directly. Instead, it displays the selected year range once the user makes a selection, e.g., "2024-2028".

2. Dropdown Menu:

   • The dropdown contains the year range selector. It appears when the input field is clicked and disappears when a click occurs outside the component.
   • The dropdown consists of:
     • A header with navigation buttons (prev and next) to move through different sets of year ranges (e.g., 2024-2028, 2029-2033).
     • A label that displays the current year range (e.g., "2024-2028") in the header.
     • A grid of year buttons that shows the years within the current range.