From 1f2249cd7c0ead1e78a995a078a9d0821d86e86e Mon Sep 17 00:00:00 2001
From: Tewson Seeoun <tewson.seeoun@gmail.com>
Date: Tue, 9 Apr 2024 19:46:02 +0100
Subject: [PATCH] Group LEAs in selector

---
 src/components/AreaSelector.astro | 42 ++++++++++++++++---------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/AreaSelector.astro b/src/components/AreaSelector.astro
index 00211ba..d7edc5a 100644
--- 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]");