Skip to content

Commit 92e7631

Browse files
YugaJ7YugaJ7
committed
- Create modular composables for detail screen sections.
- Add `IntroductionSection` composable. - Add `TableOfContents` composable. - Add `SyntaxSection` composable. - Add `SectionsList` composable. - Add `PitfallsSection` composable. - Add `RelatedTopicsSection` composable.
1 parent 5665819 commit 92e7631

File tree

6 files changed

+180
-0
lines changed

6 files changed

+180
-0
lines changed

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components
2+
3+
import androidx.compose.foundation.layout.Spacer
4+
import androidx.compose.foundation.layout.height
5+
import androidx.compose.material3.MaterialTheme
6+
import androidx.compose.material3.Text
7+
import androidx.compose.runtime.Composable
8+
import androidx.compose.ui.Modifier
9+
import androidx.compose.ui.unit.dp
10+
import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.KotlinTopicDetails
11+
import kotlindictionarymultiplatform.composeapp.generated.resources.Res
12+
import kotlindictionarymultiplatform.composeapp.generated.resources.introduction
13+
import org.jetbrains.compose.resources.stringResource
14+
15+
@Composable
16+
fun IntroductionSection(topic: KotlinTopicDetails) {
17+
Text(stringResource(Res.string.introduction), style = MaterialTheme.typography.headlineLarge, color = MaterialTheme.colorScheme.onPrimary)
18+
Spacer(modifier = Modifier.height(4.dp))
19+
Text(text = topic.intro, style = MaterialTheme.typography.bodyMedium)
20+
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components
2+
3+
import androidx.compose.foundation.layout.Spacer
4+
import androidx.compose.foundation.layout.height
5+
import androidx.compose.material3.MaterialTheme
6+
import androidx.compose.material3.Text
7+
import androidx.compose.runtime.Composable
8+
import androidx.compose.ui.Modifier
9+
import androidx.compose.ui.unit.dp
10+
import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.KotlinTopicDetails
11+
import kotlindictionarymultiplatform.composeapp.generated.resources.Res
12+
import kotlindictionarymultiplatform.composeapp.generated.resources.bullet_item
13+
import kotlindictionarymultiplatform.composeapp.generated.resources.pitfalls
14+
import org.jetbrains.compose.resources.stringResource
15+
16+
@Composable
17+
fun PitfallsSection(topic: KotlinTopicDetails) {
18+
if (topic.pitfalls.isNotEmpty()) {
19+
Text(stringResource(Res.string.pitfalls), style = MaterialTheme.typography.headlineLarge, color = MaterialTheme.colorScheme.onPrimary)
20+
Spacer(Modifier.height(4.dp))
21+
topic.pitfalls.forEach {
22+
Text(stringResource(Res.string.bullet_item, it), style = MaterialTheme.typography.bodyMedium)
23+
}
24+
Spacer(Modifier.height(16.dp))
25+
}
26+
}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components
2+
3+
import androidx.compose.foundation.layout.Spacer
4+
import androidx.compose.foundation.layout.height
5+
import androidx.compose.material3.MaterialTheme
6+
import androidx.compose.material3.Text
7+
import androidx.compose.runtime.Composable
8+
import androidx.compose.ui.Modifier
9+
import androidx.compose.ui.unit.dp
10+
import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.KotlinTopicDetails
11+
import kotlindictionarymultiplatform.composeapp.generated.resources.Res
12+
import kotlindictionarymultiplatform.composeapp.generated.resources.bullet_item
13+
import kotlindictionarymultiplatform.composeapp.generated.resources.related_topics
14+
import org.jetbrains.compose.resources.stringResource
15+
16+
@Composable
17+
fun RelatedTopicsSection(topic: KotlinTopicDetails) {
18+
if (topic.relatedTopics.isNotEmpty()) {
19+
Text(stringResource(Res.string.related_topics), style = MaterialTheme.typography.headlineLarge, color = MaterialTheme.colorScheme.onPrimary)
20+
Spacer(Modifier.height(4.dp))
21+
topic.relatedTopics.forEach {
22+
Text(stringResource(Res.string.bullet_item, it), style = MaterialTheme.typography.bodyMedium)
23+
}
24+
}
25+
}

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components
2+
3+
import androidx.compose.foundation.layout.Spacer
4+
import androidx.compose.foundation.layout.height
5+
import androidx.compose.material3.MaterialTheme
6+
import androidx.compose.material3.Text
7+
import androidx.compose.runtime.Composable
8+
import androidx.compose.ui.Modifier
9+
import androidx.compose.ui.text.font.FontWeight
10+
import androidx.compose.ui.unit.dp
11+
import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.KotlinTopicDetails
12+
import com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.CodeExampleBox
13+
14+
@Composable
15+
fun SectionsList(topic: KotlinTopicDetails) {
16+
topic.sections.forEach { section ->
17+
section.heading?.let {
18+
Text(it, style = MaterialTheme.typography.headlineLarge, color = MaterialTheme.colorScheme.onPrimary)
19+
Spacer(Modifier.height(4.dp))
20+
}
21+
section.content?.let {
22+
Text(it, style = MaterialTheme.typography.bodyMedium)
23+
Spacer(Modifier.height(8.dp))
24+
}
25+
section.codeExamples.forEach { example ->
26+
example.description?.let {
27+
Text(it, fontWeight = FontWeight.Bold, style = MaterialTheme.typography.bodyMedium)
28+
}
29+
Spacer(Modifier.height(16.dp))
30+
CodeExampleBox(code = example.code)
31+
Spacer(Modifier.height(16.dp))
32+
}
33+
}
34+
}

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components
2+
3+
import androidx.compose.foundation.layout.Spacer
4+
import androidx.compose.foundation.layout.height
5+
import androidx.compose.material3.MaterialTheme
6+
import androidx.compose.material3.Text
7+
import androidx.compose.runtime.Composable
8+
import androidx.compose.ui.Modifier
9+
import androidx.compose.ui.unit.dp
10+
import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.KotlinTopicDetails
11+
import kotlindictionarymultiplatform.composeapp.generated.resources.Res
12+
import kotlindictionarymultiplatform.composeapp.generated.resources.notes_with_value
13+
import kotlindictionarymultiplatform.composeapp.generated.resources.syntax
14+
import org.jetbrains.compose.resources.stringResource
15+
16+
@Composable
17+
fun SyntaxSection(topic: KotlinTopicDetails) {
18+
if (topic.syntax.signature.isNotBlank()) {
19+
Text(stringResource(Res.string.syntax), style = MaterialTheme.typography.headlineLarge, color = MaterialTheme.colorScheme.onPrimary)
20+
Spacer(Modifier.height(4.dp))
21+
Text(text = topic.syntax.signature, style = MaterialTheme.typography.bodyMedium)
22+
topic.syntax.notes?.let {
23+
Spacer(Modifier.height(4.dp))
24+
Text(
25+
text = stringResource(Res.string.notes_with_value, it),
26+
style = MaterialTheme.typography.bodyMedium,
27+
)
28+
}
29+
Spacer(Modifier.height(16.dp))
30+
}
31+
}

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
package com.developersbreach.kotlindictionarymultiplatform.ui.screens.detail.components
2+
3+
import androidx.compose.foundation.clickable
4+
import androidx.compose.foundation.layout.Spacer
5+
import androidx.compose.foundation.layout.height
6+
import androidx.compose.foundation.layout.padding
7+
import androidx.compose.material3.MaterialTheme
8+
import androidx.compose.material3.Text
9+
import androidx.compose.runtime.Composable
10+
import androidx.compose.ui.Modifier
11+
import androidx.compose.ui.unit.dp
12+
import com.developersbreach.kotlindictionarymultiplatform.data.detail.model.KotlinTopicDetails
13+
import kotlindictionarymultiplatform.composeapp.generated.resources.Res
14+
import kotlindictionarymultiplatform.composeapp.generated.resources.introduction_bullet
15+
import kotlindictionarymultiplatform.composeapp.generated.resources.pitfalls_bullet
16+
import kotlindictionarymultiplatform.composeapp.generated.resources.related_topics_bullet
17+
import kotlindictionarymultiplatform.composeapp.generated.resources.sections_bullet
18+
import kotlindictionarymultiplatform.composeapp.generated.resources.syntax_bullet
19+
import kotlindictionarymultiplatform.composeapp.generated.resources.table_of_contents
20+
import org.jetbrains.compose.resources.stringResource
21+
22+
@Composable
23+
fun TableOfContents(topic: KotlinTopicDetails) {
24+
val items = buildList {
25+
add(stringResource(Res.string.introduction_bullet))
26+
if (topic.syntax.signature.isNotBlank()) add(stringResource(Res.string.syntax_bullet))
27+
if (topic.sections.isNotEmpty()) add(stringResource(Res.string.sections_bullet))
28+
if (topic.pitfalls.isNotEmpty()) add(stringResource(Res.string.pitfalls_bullet))
29+
if (topic.relatedTopics.isNotEmpty()) add(stringResource(Res.string.related_topics_bullet))
30+
}
31+
32+
Text(text = stringResource(Res.string.table_of_contents), style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onPrimary)
33+
Spacer(Modifier.height(4.dp))
34+
items.forEach {
35+
Text(
36+
text = it,
37+
modifier = Modifier
38+
.clickable { /* scroll-to support later */ }
39+
.padding(vertical = 4.dp),
40+
color = MaterialTheme.colorScheme.onSurface,
41+
)
42+
}
43+
Spacer(Modifier.height(16.dp))
44+
}

0 commit comments

Comments
 (0)