| Sunkanmi12 | |
| Dec 10 2025, 9:15 PM |
| F71079747: image.png | |
| Dec 15 2025, 2:04 PM |
| F71079738: image.png | |
| Dec 15 2025, 2:04 PM |
| F71079736: image.png | |
| Dec 15 2025, 2:04 PM |
| F71079733: image.png | |
| Dec 15 2025, 2:04 PM |
**Title: Country Selector Component
Description: Add country selection dropdown in navbar.
Domain: Design (Frontend)
Difficulty: Intermediate
Steps:
Expected outcome: Users can switch countries easily.
@Jaydroid has claimed this task.
@SincerelySaeed5000 requesting permission to progress.
@SincerelySaeed5000
Summary of work done
Implemented the Country Selector feature in the navbar (next to the logo) with flag labels and lucide-react icons, dynamic URL navigation (/gh, /ng, /ke), visual active-country indicator, and a centered loading modal that shows while fetching. Created a reusable hook (src/hooks/useCountryData.ts) to fetch country data and a dynamic CountryPage template that consumes the hook. Modal and pages are responsive for desktop, tablet, and mobile. All UI behavior (selection → loading → navigate → render) is wired and testable.
Remaining work: backend integration — uncomment and update the fetch call in useCountryData.ts to point to API endpoint.
Default:
Dropdown:
Fetch request:
After page load:
Here's the PR: https://github.com/Sunkanmi1/SCC-WEBAPP/pull/5
Please, kindly review and let me know if to iterate or get approved.