feat: update demo

samples/desktopApp/src/desktopMain/kotlin/com/highcapable/flexiui/demo/Main.kt

@@ -31,6 +31,6 @@ fun main() = application {
     Window(
         onCloseRequest = ::exitApplication,
         title = "FlexiUI Demo",
-        state = rememberWindowState(width = 550.dp, height = 900.dp)
+        state = rememberWindowState(width = 550.dp, height = 700.dp)
     ) { MainView() }
 }

samples/shared/src/commonMain/kotlin/App.kt

@@ -44,6 +44,8 @@ import com.highcapable.flexiui.blueColors
 import com.highcapable.flexiui.component.AreaBox
 import com.highcapable.flexiui.component.Button
 import com.highcapable.flexiui.component.CheckBox
+import com.highcapable.flexiui.component.DropdownMenu
+import com.highcapable.flexiui.component.DropdownMenuItem
 import com.highcapable.flexiui.component.RadioButton
 import com.highcapable.flexiui.component.Slider
 import com.highcapable.flexiui.component.Surface
@@ -61,7 +63,7 @@ import kotlin.math.roundToInt
 
 @Composable
 fun App() {
-    val themeColor = remember { mutableStateOf(greenColors()) }
+    val themeColor = remember { mutableStateOf(ThemeColors.first().second) }
     FlexiTheme(colors = themeColor.value) {
         Surface {
             Column(horizontalAlignment = Alignment.CenterHorizontally) {
@@ -139,59 +141,53 @@ private fun ContentView() {
 private fun ThemeColorsView(themeColor: MutableState<Colors>) {
     Text(text = "Here are some theme color tests.")
     Spacer(Modifier.padding(10.dp))
-    Row {
+    var showChooser by remember { mutableStateOf(false) }
-        Button(onClick = { themeColor.value = defaultColors() }) {
+    var choosedColorName by remember { mutableStateOf(ThemeColors.first().first) }
-            Text(text = "Default")
+    var choosedColor by remember { mutableStateOf(ThemeColors.first().second) }
-        }
+    themeColor.value = choosedColor
-        Spacer(Modifier.padding(10.dp))
+    Button(onClick = { showChooser = !showChooser }) {
-        Button(onClick = { themeColor.value = defaultColors(darkMode = true) }) {
+        Text(text = "Choose a color: $choosedColorName")
-            Text(text = "Default (Dark)")
+        DropdownMenu(
-        }
+            expanded = showChooser,
-        Spacer(Modifier.padding(10.dp))
+            onDismissRequest = { showChooser = false }
-        Button(onClick = { themeColor.value = defaultColors(darkMode = true, blackDarkMode = true) }) {
+        ) {
-            Text(text = "Default (Black)")
+            ThemeColors.forEach { (name, color) ->
-        }
+                DropdownMenuItem(
-    }
+                    onClick = {
-    Spacer(Modifier.padding(10.dp))
+                        showChooser = false
-    Row {
+                        choosedColorName = name
-        Button(onClick = { themeColor.value = redColors() }) {
+                        choosedColor = color
-            Text(text = "Red")
+                    },
-        }
+                    actived = choosedColorName == name
-        Spacer(Modifier.padding(10.dp))
+                ) { Text(text = name) }
-        Button(onClick = { themeColor.value = pinkColors() }) {
-            Text(text = "Pink")
-        }
-        Spacer(Modifier.padding(10.dp))
-        Button(onClick = { themeColor.value = purpleColors() }) {
-            Text(text = "Purple")
-        }
-    }
-    Spacer(Modifier.padding(10.dp))
-    Row {
-        Button(onClick = { themeColor.value = greenColors() }) {
-            Text(text = "Green")
-        }
-        Spacer(Modifier.padding(10.dp))
-        Button(onClick = { themeColor.value = orangeColors() }) {
-            Text(text = "Orange")
-        }
-        Spacer(Modifier.padding(10.dp))
-        Button(onClick = { themeColor.value = yellowColors() }) {
-            Text(text = "Yellow")
-        }
-    }
-    Spacer(Modifier.padding(10.dp))
-    Row {
-        Button(onClick = { themeColor.value = blueColors() }) {
-            Text(text = "Blue")
-        }
-        Spacer(Modifier.padding(10.dp))
-        Button(onClick = { themeColor.value = greenColors(darkMode = true) }) {
-            Text(text = "Green (Dark)")
-        }
-        Spacer(Modifier.padding(10.dp))
-        Button(onClick = { themeColor.value = greenColors(darkMode = true, blackDarkMode = true) }) {
-            Text(text = "Green (Black)")
             }
         }
     }
+}
+
+private val ThemeColors = listOf(
+    "Default" to defaultColors(),
+    "Default (Dark)" to defaultColors(darkMode = true),
+    "Default (Black)" to defaultColors(darkMode = true, blackDarkMode = true),
+    "Red" to redColors(),
+    "Red (Dark)" to redColors(darkMode = true),
+    "Red (Black)" to redColors(darkMode = true, blackDarkMode = true),
+    "Pink" to pinkColors(),
+    "Pink (Dark)" to pinkColors(darkMode = true),
+    "Pink (Black)" to pinkColors(darkMode = true, blackDarkMode = true),
+    "Purple" to purpleColors(),
+    "Purple (Dark)" to purpleColors(darkMode = true),
+    "Purple (Black)" to purpleColors(darkMode = true, blackDarkMode = true),
+    "Green" to greenColors(),
+    "Green (Dark)" to greenColors(darkMode = true),
+    "Green (Black)" to greenColors(darkMode = true, blackDarkMode = true),
+    "Orange" to orangeColors(),
+    "Orange (Dark)" to orangeColors(darkMode = true),
+    "Orange (Black)" to orangeColors(darkMode = true, blackDarkMode = true),
+    "Yellow" to yellowColors(),
+    "Yellow (Dark)" to yellowColors(darkMode = true),
+    "Yellow (Black)" to yellowColors(darkMode = true, blackDarkMode = true),
+    "Blue" to blueColors(),
+    "Blue (Dark)" to blueColors(darkMode = true),
+    "Blue (Black)" to blueColors(darkMode = true, blackDarkMode = true)
+)