From c6a8073140245d5c28aae443b8d8b860b0822934 Mon Sep 17 00:00:00 2001
From: jsakamoto <junichi.jp@gmail.com>
Date: Thu, 30 May 2024 22:43:54 +0900
Subject: [PATCH] Improve voices list of sample sites - group voices by
 language

---
 SampleSites/Components/Pages/Index.razor | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/SampleSites/Components/Pages/Index.razor b/SampleSites/Components/Pages/Index.razor
index 5802e60..7429dc3 100644
--- a/SampleSites/Components/Pages/Index.razor
+++ b/SampleSites/Components/Pages/Index.razor
@@ -22,9 +22,14 @@
         Voice:
         <select @onchange="OnChangeVoice" style="max-width:100%;">
             <option value="@(default(string))">(unset)</option>
-            @foreach (var voice in Voices.OrderBy(v => v.Lang).ThenBy(v => v.VoiceURI))
+            @foreach (var voicesOfLang in Voices.GroupBy(v => v.Lang))
             {
-                <option @key="voice.VoiceIdentity" value="@voice.VoiceIdentity" selected="@(voice.VoiceIdentity == this.VoiceId)">@voice.Name (@voice.Lang)</option>
+                <optgroup label="@voicesOfLang.Key">
+                    @foreach (var voice in voicesOfLang.OrderBy(v => v.Lang).ThenBy(v => v.VoiceURI))
+                    {
+                        <option @key="voice.VoiceIdentity" value="@voice.VoiceIdentity" selected="@(voice.VoiceIdentity == this.VoiceId)">@voice.Name</option>
+                    }
+                </optgroup>
             }
         </select>
     </p>