feat: implement active country state

country-explorer/src/components/App.css

@@ -1,3 +1,19 @@
-/* Visual styling for the main layout (header/main/footer, the three
-   content sections) is intentionally not added yet — this file will grow
-   as the components that go inside each section are built. */
+.country-selection {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin: 1rem;
+}
+
+.country-selection select {
+  min-width: 0;
+  max-width: 100%;
+  padding: 0.5rem;
+  font: inherit;
+  color: var(--text-h);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}

country-explorer/src/components/App.tsx

@@ -1,12 +1,22 @@
 import './App.css';
+import { useState } from 'react';
 import { useCountries } from '../hooks/useCountries';
 import CountryCard from './CountryCard';
 import Loading from './Loading';
 import ErrorMessage from './ErrorMessage';
 
 function App() {
   const { countries, isLoading, isError, error, refetch } = useCountries();
-  const selectedCountry = countries[0];
+  const [selectedCountryCode, setSelectedCountryCode] = useState<string | null>(null);
+  const selectedCountry =
+    countries.find((country) => country.code === selectedCountryCode) ?? countries[0];
+  const activeCountryCode = selectedCountry?.code ?? null;
+
+  // Keep the selection valid when data arrives or the available countries change.
+  // Store the fallback so a removed country is not reselected if it returns later.
+  if (selectedCountryCode !== activeCountryCode) {
+    setSelectedCountryCode(activeCountryCode);
+  }
 
   return (
     <>
@@ -18,7 +28,23 @@ function App() {
       <main>
         <section aria-labelledby="controls-heading">
           <h2 id="controls-heading">Filters and selection</h2>
-          {/* RegionFilter, SortSelector, and CountrySelector go here */}
+          {/* RegionFilter and SortSelector go here */}
+          <div className="country-selection">
+            <label htmlFor="country-select">Country</label>
+            <select
+              id="country-select"
+              value={activeCountryCode ?? ''}
+              onChange={(event) => setSelectedCountryCode(event.target.value)}
+              disabled={isLoading || isError || countries.length === 0}
+            >
+              {countries.length === 0 && <option value="">No countries available</option>}
+              {countries.map((country) => (
+                <option key={country.code} value={country.code}>
+                  {country.name || country.code}
+                </option>
+              ))}
+            </select>
+          </div>
         </section>
 
         <section aria-labelledby="country-heading">