Refactor DetailScreen into smaller, reusable Composables

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/detail/DetailContentPreview.kt

@@ -0,0 +1,15 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews.detail
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.DetailContent
+import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
+
+@PreviewLightDark
+@Composable
+fun DetailContentPreview() {
+    KotlinDictionaryTheme {
+        DetailContent(topic = fakeTopicDetails())
+    }
+}

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/detail/PreviewDetailScreen.kt → composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/detail/DetailScreenPreview.kt

@@ -3,13 +3,13 @@ package com.developersbreach.kotlindictionarymultiplatform.previews.detail
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
-import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.DetailScreenContent
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.DetailScreenUI
 import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
 
 @PreviewLightDark
 @Composable
 fun DetailScreenPreview() {
     KotlinDictionaryTheme {
-        DetailScreenContent(topic = fakeTopicDetails())
+        DetailScreenUI(topic = fakeTopicDetails())
     }
 }

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/detail/DetailTopAppBarPreview.kt

@@ -0,0 +1,15 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews.detail
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.DetailTopBar
+import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
+
+@PreviewLightDark
+@Composable
+fun DetailTopBarPreview() {
+    KotlinDictionaryTheme {
+        DetailTopBar(title = fakeTopicDetails().topicName)
+    }
+}

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/detail/IntroductionSectionPreview.kt

@@ -0,0 +1,15 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews.detail
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.IntroductionSection
+import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
+
+@PreviewLightDark
+@Composable
+fun IntroductionSectionPreview() {
+    KotlinDictionaryTheme {
+        IntroductionSection(topic = fakeTopicDetails())
+    }
+}

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/detail/PitfallsSectionPreviews.kt

@@ -0,0 +1,15 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews.detail
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.PitfallsSection
+import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
+
+@PreviewLightDark
+@Composable
+fun PitfallsSectionPreview() {
+    KotlinDictionaryTheme {
+        PitfallsSection(topic = fakeTopicDetails())
+    }
+}

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/detail/RelatedTopicsSectionPreview.kt

@@ -0,0 +1,15 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews.detail
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.RelatedTopicsSection
+import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
+
+@PreviewLightDark
+@Composable
+fun RelatedTopicsSectionPreview() {
+    KotlinDictionaryTheme {
+        RelatedTopicsSection(topic = fakeTopicDetails())
+    }
+}

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/detail/SectionsListPreview.kt

@@ -0,0 +1,15 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews.detail
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.SectionsList
+import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
+
+@PreviewLightDark
+@Composable
+fun SectionsListPreview() {
+    KotlinDictionaryTheme {
+        SectionsList(topic = fakeTopicDetails())
+    }
+}

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/detail/SyntaxSectionPreview.kt

@@ -0,0 +1,15 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews.detail
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.SyntaxSection
+import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
+
+@PreviewLightDark
+@Composable
+fun SyntaxSectionPreview() {
+    KotlinDictionaryTheme {
+        SyntaxSection(topic = fakeTopicDetails())
+    }
+}

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/detail/TableOfContentsPreview.kt

@@ -0,0 +1,15 @@
+package com.developersbreach.kotlindictionarymultiplatform.previews.detail
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.TableOfContents
+import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
+
+@PreviewLightDark
+@Composable
+fun TableOfContentsPreview() {
+    KotlinDictionaryTheme {
+        TableOfContents(topic = fakeTopicDetails())
+    }
+}

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/detail/CodeExampleBox.kt

@@ -0,0 +1,119 @@
+package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.ContentCopy
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalClipboardManager
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import kotlindictionarymultiplatform.composeapp.generated.resources.Res
+import kotlindictionarymultiplatform.composeapp.generated.resources.copied
+import kotlindictionarymultiplatform.composeapp.generated.resources.copy
+import kotlindictionarymultiplatform.composeapp.generated.resources.kotlin
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+import org.jetbrains.compose.resources.stringResource
+
+@Composable
+fun CodeExampleBox(
+    code: String,
+    modifier: Modifier = Modifier,
+) {
+    val clipboardManager = LocalClipboardManager.current
+    var copied by remember { mutableStateOf(false) }
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .border(1.dp, MaterialTheme.colorScheme.onPrimaryContainer, RoundedCornerShape(8.dp))
+            .background(MaterialTheme.colorScheme.primaryContainer, RoundedCornerShape(8.dp)),
+    ) {
+        Column(modifier = Modifier.padding(0.dp)) {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(MaterialTheme.colorScheme.onPrimaryContainer, RoundedCornerShape(8.dp))
+                    .padding(6.dp),
+            ) {
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Text(
+                        text = stringResource(Res.string.kotlin),
+                        color = MaterialTheme.colorScheme.onPrimary,
+                        fontWeight = FontWeight.Bold,
+                        fontSize = 14.sp,
+                        modifier = Modifier.padding(start = 4.dp),
+                    )
+
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically,
+                        modifier = Modifier
+                            .clickable {
+                                clipboardManager.setText(AnnotatedString(code))
+                                copied = true
+                                CoroutineScope(Dispatchers.Main).launch {
+                                    delay(2500)
+                                    copied = false
+                                }
+                            }
+                            .padding(4.dp),
+                    ) {
+                        Icon(
+                            imageVector = if (copied) Icons.Default.Check else Icons.Default.ContentCopy,
+                            contentDescription = stringResource(Res.string.copy),
+                            tint = MaterialTheme.colorScheme.onPrimary,
+                        )
+                        Spacer(modifier = Modifier.width(4.dp))
+                        Text(
+                            text = if (copied) stringResource(Res.string.copied) else stringResource(Res.string.copy),
+                            fontSize = 12.sp,
+                            color = MaterialTheme.colorScheme.onPrimary,
+                        )
+                    }
+                }
+            }
+
+            Spacer(modifier = Modifier.height(8.dp))
+
+            Text(
+                text = code,
+                modifier = Modifier.padding(start = 12.dp, end = 12.dp, bottom = 12.dp),
+                fontFamily = FontFamily.Monospace,
+                fontSize = 14.sp,
+                lineHeight = 20.sp,
+                color = MaterialTheme.colorScheme.onPrimary,
+            )
+        }
+    }
+}

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/detail/DetailContent.kt

@@ -0,0 +1,28 @@
+package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.KotlinTopicDetails
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.IntroductionSection
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.PitfallsSection
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.RelatedTopicsSection
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.SectionsList
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.SyntaxSection
+import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.TableOfContents
+
+@Composable
+fun DetailContent(
+    topic: KotlinTopicDetails,
+    modifier: Modifier = Modifier,
+) {
+    Column(modifier = modifier.fillMaxSize()) {
+        TableOfContents(topic)
+        IntroductionSection(topic)
+        SyntaxSection(topic)
+        SectionsList(topic)
+        PitfallsSection(topic)
+        RelatedTopicsSection(topic)
+    }
+}