diff --git a/README.md b/README.md index 69f1c1d..847707e 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ - [ ] Assign unique IDs to objects and enforce consistent ordering logic - [ ] Correct usage of visibility modifiers across the codebase - [ ] Introduce common `@Preview` annotations for reusable Composable previews -- [ ] Add inline code formatting support for syntax display on the `Detail Screen` +- [x] Add code block for syntax display on the `Detail Screen` - [ ] Implement caching on the `Detail Screen` to store previously viewed topic data - [ ] Implement dynamic topic loading in `TopicRepository` to support scalability - [ ] Integrate Room database to persist bookmark states @@ -74,10 +74,9 @@ Here’s an early concept image illustrating the app’s design: Here are a couple of early previews from the Android version of the app: -

- Topic Screen - Detail Screen -

+| Topic | Detail | +| :---: | :----: | +| Topic Screen | Detail Screen | > *More previews coming soon as the UI progresses!* diff --git a/assets/img_detail_screen_variables.png b/assets/img_detail_screen_variables.png index 07d6bb2..5d921ae 100644 Binary files a/assets/img_detail_screen_variables.png and b/assets/img_detail_screen_variables.png differ diff --git a/assets/img_topic_screen.png b/assets/img_topic_screen.png index 12bccb3..1dae923 100644 Binary files a/assets/img_topic_screen.png and b/assets/img_topic_screen.png differ diff --git a/composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/detail/DetailScreenComponents.kt b/composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/detail/DetailScreenComponents.kt index e85b89d..889789b 100644 --- a/composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/detail/DetailScreenComponents.kt +++ b/composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/detail/DetailScreenComponents.kt @@ -3,6 +3,7 @@ package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier @@ -63,10 +64,9 @@ fun SyntaxSection( color = MaterialTheme.colorScheme.onPrimary, ) Spacer(Modifier.height(4.dp)) - KdText( - modifier = Modifier, - text = syntax.signature, - style = MaterialTheme.typography.bodyMedium, + CodeExampleBox( + code = syntax.signature, + modifier = Modifier.padding(bottom = 8.dp), ) syntax.notes?.let { Spacer(Modifier.height(4.dp))