Group LEAs in selector

DublinInquirer · Apr 9, 2024 · 1f2249c · 1f2249c
1 parent 748396d
commit 1f2249c
Showing 1 changed file with 22 additions and 20 deletions.
diff --git a/src/components/AreaSelector.astro b/src/components/AreaSelector.astro
@@ -15,26 +15,28 @@ const { dccElectoralAreaNames, fingalElectoralAreaNames } = Astro.props;
   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2 block w-full"
 >
   <option disabled selected>Choose your electoral area</option>
-  <option disabled>{LOCAL_AUTHORITY.DUBLIN_CITY_COUNCIL}</option>
-  {
-    dccElectoralAreaNames.map((electoralAreaName) => (
-      <option
-        value={`${lodash.kebabCase(LOCAL_AUTHORITY.DUBLIN_CITY_COUNCIL)}/${lodash.kebabCase(electoralAreaName)}`}
-      >
-        {electoralAreaName}
-      </option>
-    ))
-  }
-  <option disabled>{LOCAL_AUTHORITY.FINGAL_COUNTY_COUNCIL}</option>
-  {
-    fingalElectoralAreaNames.map((electoralAreaName) => (
-      <option
-        value={`${lodash.kebabCase(LOCAL_AUTHORITY.FINGAL_COUNTY_COUNCIL)}/${lodash.kebabCase(electoralAreaName)}`}
-      >
-        {electoralAreaName}
-      </option>
-    ))
-  }
+  <optgroup label={LOCAL_AUTHORITY.DUBLIN_CITY_COUNCIL}>
+    {
+      dccElectoralAreaNames.map((electoralAreaName) => (
+        <option
+          value={`${lodash.kebabCase(LOCAL_AUTHORITY.DUBLIN_CITY_COUNCIL)}/${lodash.kebabCase(electoralAreaName)}`}
+        >
+          {electoralAreaName}
+        </option>
+      ))
+    }
+  </optgroup>
+  <optgroup label={LOCAL_AUTHORITY.FINGAL_COUNTY_COUNCIL}>
+    {
+      fingalElectoralAreaNames.map((electoralAreaName) => (
+        <option
+          value={`${lodash.kebabCase(LOCAL_AUTHORITY.FINGAL_COUNTY_COUNCIL)}/${lodash.kebabCase(electoralAreaName)}`}
+        >
+          {electoralAreaName}
+        </option>
+      ))
+    }
+  </optgroup>
 </select>
 <script>
   const selectElement = document.querySelector("select[name=electoral-area]");