Thumbnail Selector with Region-Based Dropdown
You are given a JSON object containing a nested array of thumbnail images grouped by region (NSW, QLD, VIC).
Requirements:
Extract the region name (nsw, qld, vic) and page number from each thumbnail URL.
Create a dropdown list where each option is labelled as {Region}-{PageIndex}, where:
Region is formatted as NSW, Qld, Vic.
PageIndex starts for each region with the actual page number in the URL.
By default, display the first NSW thumbnail (NSW-1) when the page loads.
When the user changes the dropdown selection, the displayed thumbnail should update dynamically.
Example Dropdown Options:
NSW-1
NSW-2
NSW-3
Qld-20
Qld-21
Vic-20
Vic-21
Deliverables:
A TypeScript function or Angular component that:
Parses the JSON structure.
Generates the dropdown list.
Displays the selected thumbnail image.