Skip to content

Commit 5665819

Browse files
YugaJ7YugaJ7
committed
- Refactor DetailScreen into multiple composable functions for better organization.
- Create `DetailScreenUI`, `DetailTopAppBar`, `DetailContent`, `CodeExampleBox`, `DetailScreen`
1 parent 2c27974 commit 5665819

File tree

5 files changed

+219
-265
lines changed

5 files changed

+219
-265
lines changed

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

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.border
5+
import androidx.compose.foundation.clickable
6+
import androidx.compose.foundation.layout.Arrangement
7+
import androidx.compose.foundation.layout.Box
8+
import androidx.compose.foundation.layout.Column
9+
import androidx.compose.foundation.layout.Row
10+
import androidx.compose.foundation.layout.Spacer
11+
import androidx.compose.foundation.layout.fillMaxWidth
12+
import androidx.compose.foundation.layout.height
13+
import androidx.compose.foundation.layout.padding
14+
import androidx.compose.foundation.layout.width
15+
import androidx.compose.foundation.shape.RoundedCornerShape
16+
import androidx.compose.material.icons.Icons
17+
import androidx.compose.material.icons.filled.Check
18+
import androidx.compose.material.icons.filled.ContentCopy
19+
import androidx.compose.material3.Icon
20+
import androidx.compose.material3.MaterialTheme
21+
import androidx.compose.material3.Text
22+
import androidx.compose.runtime.Composable
23+
import androidx.compose.runtime.getValue
24+
import androidx.compose.runtime.mutableStateOf
25+
import androidx.compose.runtime.remember
26+
import androidx.compose.runtime.setValue
27+
import androidx.compose.ui.Alignment
28+
import androidx.compose.ui.Modifier
29+
import androidx.compose.ui.platform.LocalClipboardManager
30+
import androidx.compose.ui.text.AnnotatedString
31+
import androidx.compose.ui.text.font.FontFamily
32+
import androidx.compose.ui.text.font.FontWeight
33+
import androidx.compose.ui.unit.dp
34+
import androidx.compose.ui.unit.sp
35+
import kotlindictionarymultiplatform.composeapp.generated.resources.Res
36+
import kotlindictionarymultiplatform.composeapp.generated.resources.copied
37+
import kotlindictionarymultiplatform.composeapp.generated.resources.copy
38+
import kotlindictionarymultiplatform.composeapp.generated.resources.kotlin
39+
import kotlinx.coroutines.CoroutineScope
40+
import kotlinx.coroutines.Dispatchers
41+
import kotlinx.coroutines.delay
42+
import kotlinx.coroutines.launch
43+
import org.jetbrains.compose.resources.stringResource
44+
45+
@Composable
46+
fun CodeExampleBox(
47+
code: String,
48+
modifier: Modifier = Modifier,
49+
) {
50+
val clipboardManager = LocalClipboardManager.current
51+
var copied by remember { mutableStateOf(false) }
52+
53+
Box(
54+
modifier = modifier
55+
.fillMaxWidth()
56+
.border(1.dp, MaterialTheme.colorScheme.onPrimaryContainer, RoundedCornerShape(8.dp))
57+
.background(MaterialTheme.colorScheme.primaryContainer, RoundedCornerShape(8.dp)),
58+
) {
59+
Column(modifier = Modifier.padding(0.dp)) {
60+
Box(
61+
modifier = Modifier
62+
.fillMaxWidth()
63+
.background(MaterialTheme.colorScheme.onPrimaryContainer, RoundedCornerShape(8.dp))
64+
.padding(6.dp),
65+
) {
66+
Row(
67+
modifier = Modifier.fillMaxWidth(),
68+
horizontalArrangement = Arrangement.SpaceBetween,
69+
verticalAlignment = Alignment.CenterVertically,
70+
) {
71+
Text(
72+
text = stringResource(Res.string.kotlin),
73+
color = MaterialTheme.colorScheme.onPrimary,
74+
fontWeight = FontWeight.Bold,
75+
fontSize = 14.sp,
76+
modifier = Modifier.padding(start = 4.dp),
77+
)
78+
79+
Row(
80+
verticalAlignment = Alignment.CenterVertically,
81+
modifier = Modifier
82+
.clickable {
83+
clipboardManager.setText(AnnotatedString(code))
84+
copied = true
85+
CoroutineScope(Dispatchers.Main).launch {
86+
delay(2500)
87+
copied = false
88+
}
89+
}
90+
.padding(4.dp),
91+
) {
92+
Icon(
93+
imageVector = if (copied) Icons.Default.Check else Icons.Default.ContentCopy,
94+
contentDescription = stringResource(Res.string.copy),
95+
tint = MaterialTheme.colorScheme.onPrimary,
96+
)
97+
Spacer(modifier = Modifier.width(4.dp))
98+
Text(
99+
text = if (copied) stringResource(Res.string.copied) else stringResource(Res.string.copy),
100+
fontSize = 12.sp,
101+
color = MaterialTheme.colorScheme.onPrimary,
102+
)
103+
}
104+
}
105+
}
106+
107+
Spacer(modifier = Modifier.height(8.dp))
108+
109+
Text(
110+
text = code,
111+
modifier = Modifier.padding(start = 12.dp, end = 12.dp, bottom = 12.dp),
112+
fontFamily = FontFamily.Monospace,
113+
fontSize = 14.sp,
114+
lineHeight = 20.sp,
115+
color = MaterialTheme.colorScheme.onPrimary,
116+
)
117+
}
118+
}
119+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail
2+
3+
import androidx.compose.foundation.layout.Column
4+
import androidx.compose.foundation.layout.fillMaxSize
5+
import androidx.compose.runtime.Composable
6+
import androidx.compose.ui.Modifier
7+
import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.KotlinTopicDetails
8+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.IntroductionSection
9+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.PitfallsSection
10+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.RelatedTopicsSection
11+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.SectionsList
12+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.SyntaxSection
13+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.TableOfContents
14+
15+
@Composable
16+
fun DetailContent(
17+
topic: KotlinTopicDetails,
18+
modifier: Modifier = Modifier,
19+
) {
20+
Column(modifier = modifier.fillMaxSize()) {
21+
TableOfContents(topic)
22+
IntroductionSection(topic)
23+
SyntaxSection(topic)
24+
SectionsList(topic)
25+
PitfallsSection(topic)
26+
RelatedTopicsSection(topic)
27+
}
28+
}

0 commit comments

Comments
 (0)