Merge pull request #20 from DevelopersBreach/shreyas/syntax-code-block

Display syntax within a `CodeExampleBox` on the detail screen

Author: yesshreyes

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:
 
-<p>
-  <img src="assets/img_topic_screen.png" alt="Topic Screen" width="150"/>
-  <img src="assets/img_detail_screen_variables.png" alt="Detail Screen" width="150"/>
-</p>
+| Topic | Detail |
+| :---: | :----: |
+| <img src="assets/img_topic_screen.png" alt="Topic Screen" width="200"/> | <img src="assets/img_detail_screen_variables.png" alt="Detail Screen" width="200" /> |
 
 > *More previews coming soon as the UI progresses!*
 

assets/img_detail_screen_variables.png

@@ -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))