example: Add an about dialog to ThirdPage

Author: YuKongA

composeApp/src/commonMain/kotlin/ThirdPage.kt

@@ -1,16 +1,30 @@
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalUriHandler
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.basic.Card
 import top.yukonga.miuix.kmp.basic.LazyColumn
 import top.yukonga.miuix.kmp.basic.ScrollBehavior
-import top.yukonga.miuix.kmp.basic.SmallTitle
+import top.yukonga.miuix.kmp.basic.Text
+import top.yukonga.miuix.kmp.extra.SuperArrow
+import top.yukonga.miuix.kmp.extra.SuperDialog
 import top.yukonga.miuix.kmp.extra.SuperDropdown
 import top.yukonga.miuix.kmp.extra.SuperSwitch
+import top.yukonga.miuix.kmp.theme.MiuixTheme
+import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.dismissDialog
 import top.yukonga.miuix.kmp.utils.getWindowSize
 import utils.VersionInfo
 
@@ -30,6 +44,7 @@ fun ThirdPage(
     onEnablePageUserScrollChange: (Boolean) -> Unit,
     colorMode: MutableState<Int>
 ) {
+    val showDialog = remember { mutableStateOf(false) }
     LazyColumn(
         modifier = Modifier.height(getWindowSize().height.dp),
         contentPadding = PaddingValues(top = padding.calculateTopPadding()),
@@ -38,8 +53,7 @@ fun ThirdPage(
         item {
             Card(
                 modifier = Modifier
-                    .padding(horizontal = 12.dp)
-                    .padding(top = 12.dp, bottom = 6.dp)
+                    .padding(12.dp)
             ) {
                 SuperSwitch(
                     title = "Show FPS Monitor",
@@ -73,10 +87,72 @@ fun ThirdPage(
                     onSelectedIndexChange = { colorMode.value = it }
                 )
             }
-            SmallTitle(
-                modifier = Modifier.padding(bottom = 6.dp + padding.calculateBottomPadding()),
-                text = "Current Version: " + VersionInfo.VERSION_NAME + " (" + VersionInfo.VERSION_CODE + ")"
-            )
+            Card(
+                modifier = Modifier
+                    .padding(horizontal = 12.dp)
+            ) {
+                SuperArrow(
+                    title = "About",
+                    summary = "About this app",
+                    onClick = {
+                        showDialog.value = true
+                    }
+                )
+            }
         }
     }
+    dialog(showDialog)
+}
+
+@Composable
+fun dialog(showDialog: MutableState<Boolean>) {
+    SuperDialog(
+        title = "About",
+        summary = "Demo app for Miuix",
+        show = showDialog,
+        onDismissRequest = { dismissDialog(showDialog) },
+        content = {
+            Column {
+                val uriHandler = LocalUriHandler.current
+                Text(
+                    text = "Version: " + VersionInfo.VERSION_NAME + " (" + VersionInfo.VERSION_CODE + ")"
+                )
+                Row(
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Text(
+                        text = "View Source: "
+                    )
+                    Text(
+                        text = AnnotatedString(
+                            text = "GitHub",
+                            spanStyle = SpanStyle(textDecoration = TextDecoration.Underline, color = MiuixTheme.colorScheme.primary)
+                        ),
+                        modifier = Modifier.clickable(
+                            onClick = {
+                                uriHandler.openUri("https://github.com/miuix-kotlin-multiplatform/miuix")
+                            }
+                        )
+                    )
+                }
+                Row(
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Text(
+                        text = "Join Group: "
+                    )
+                    Text(
+                        text = AnnotatedString(
+                            text = "Telegram",
+                            spanStyle = SpanStyle(textDecoration = TextDecoration.Underline, color = MiuixTheme.colorScheme.primary)
+                        ),
+                        modifier = Modifier.clickable(
+                            onClick = {
+                                uriHandler.openUri("https://t.me/YuKongA13579")
+                            },
+                        )
+                    )
+                }
+            }
+        })
 }

composeApp/src/commonMain/kotlin/component/TextComponent.kt

@@ -328,7 +328,6 @@ fun TextComponent() {
     dialog2(showDialog2)
 }
 
-
 @Composable
 fun dialog(showDialog: MutableState<Boolean>) {
     val value = remember { mutableStateOf("") }
@@ -376,13 +375,14 @@ fun dialog2(showDialog: MutableState<Boolean>) {
     var miuixSuperSwitchState by remember { mutableStateOf(false) }
     SuperDialog(
         title = "Dialog 2",
-        backgroundColor = MiuixTheme.colorScheme.background,
         show = showDialog,
         onDismissRequest = {
             dismissDialog(showDialog)
         }
     ) {
-        Card {
+        Card(
+            color = MiuixTheme.colorScheme.secondaryContainer,
+        ) {
             SuperDropdown(
                 title = "Dropdown",
                 items = dropdownOptions,