Skip to content

Commit 5da6ce2

Browse files
yesshreyesyesshreyes
authored
Merge pull request #13 from DevelopersBreach/yuga/detail-screen-ui-modularization
Refactor `DetailScreen` into smaller, reusable Composables
2 parents 2c27974 + aab4ded commit 5da6ce2

File tree

20 files changed

+521
-267
lines changed

20 files changed

+521
-267
lines changed

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.previews.detail
2+
3+
import androidx.compose.runtime.Composable
4+
import androidx.compose.ui.tooling.preview.PreviewLightDark
5+
import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
6+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.DetailContent
7+
import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
8+
9+
@PreviewLightDark
10+
@Composable
11+
fun DetailContentPreview() {
12+
KotlinDictionaryTheme {
13+
DetailContent(topic = fakeTopicDetails())
14+
}
15+
}

‎composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/detail/PreviewDetailScreen.kt‎ renamed to ‎composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/detail/DetailScreenPreview.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ package com.developersbreach.kotlindictionarymultiplatform.previews.detail
33
import androidx.compose.runtime.Composable
44
import androidx.compose.ui.tooling.preview.PreviewLightDark
55
import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
6-
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.DetailScreenContent
6+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.DetailScreenUI
77
import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
88

99
@PreviewLightDark
1010
@Composable
1111
fun DetailScreenPreview() {
1212
KotlinDictionaryTheme {
13-
DetailScreenContent(topic = fakeTopicDetails())
13+
DetailScreenUI(topic = fakeTopicDetails())
1414
}
1515
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.previews.detail
2+
3+
import androidx.compose.runtime.Composable
4+
import androidx.compose.ui.tooling.preview.PreviewLightDark
5+
import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
6+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.DetailTopBar
7+
import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
8+
9+
@PreviewLightDark
10+
@Composable
11+
fun DetailTopBarPreview() {
12+
KotlinDictionaryTheme {
13+
DetailTopBar(title = fakeTopicDetails().topicName)
14+
}
15+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.previews.detail
2+
3+
import androidx.compose.runtime.Composable
4+
import androidx.compose.ui.tooling.preview.PreviewLightDark
5+
import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
6+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.IntroductionSection
7+
import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
8+
9+
@PreviewLightDark
10+
@Composable
11+
fun IntroductionSectionPreview() {
12+
KotlinDictionaryTheme {
13+
IntroductionSection(topic = fakeTopicDetails())
14+
}
15+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.previews.detail
2+
3+
import androidx.compose.runtime.Composable
4+
import androidx.compose.ui.tooling.preview.PreviewLightDark
5+
import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
6+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.PitfallsSection
7+
import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
8+
9+
@PreviewLightDark
10+
@Composable
11+
fun PitfallsSectionPreview() {
12+
KotlinDictionaryTheme {
13+
PitfallsSection(topic = fakeTopicDetails())
14+
}
15+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.previews.detail
2+
3+
import androidx.compose.runtime.Composable
4+
import androidx.compose.ui.tooling.preview.PreviewLightDark
5+
import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
6+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.RelatedTopicsSection
7+
import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
8+
9+
@PreviewLightDark
10+
@Composable
11+
fun RelatedTopicsSectionPreview() {
12+
KotlinDictionaryTheme {
13+
RelatedTopicsSection(topic = fakeTopicDetails())
14+
}
15+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.previews.detail
2+
3+
import androidx.compose.runtime.Composable
4+
import androidx.compose.ui.tooling.preview.PreviewLightDark
5+
import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
6+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.SectionsList
7+
import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
8+
9+
@PreviewLightDark
10+
@Composable
11+
fun SectionsListPreview() {
12+
KotlinDictionaryTheme {
13+
SectionsList(topic = fakeTopicDetails())
14+
}
15+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.previews.detail
2+
3+
import androidx.compose.runtime.Composable
4+
import androidx.compose.ui.tooling.preview.PreviewLightDark
5+
import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
6+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.SyntaxSection
7+
import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
8+
9+
@PreviewLightDark
10+
@Composable
11+
fun SyntaxSectionPreview() {
12+
KotlinDictionaryTheme {
13+
SyntaxSection(topic = fakeTopicDetails())
14+
}
15+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.previews.detail
2+
3+
import androidx.compose.runtime.Composable
4+
import androidx.compose.ui.tooling.preview.PreviewLightDark
5+
import com.developersbreach.kotlindictionarymultiplatform.previews.fakeTopicDetails
6+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components.TableOfContents
7+
import com.developersbreach.kotlindictionarymultiplatform.ui.theme.KotlinDictionaryTheme
8+
9+
@PreviewLightDark
10+
@Composable
11+
fun TableOfContentsPreview() {
12+
KotlinDictionaryTheme {
13+
TableOfContents(topic = fakeTopicDetails())
14+
}
15+
}

‎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+
}

0 commit comments

Comments
 (0)