UI for Skills List

DBTApp/.idea/deploymentTargetSelector.xml

@@ -17,6 +17,9 @@
       <SelectionState runConfigName="SingleSkillsCardPreview">
         <option name="selectionMode" value="DROPDOWN" />
       </SelectionState>
+      <SelectionState runConfigName="SkillsScreen">
+        <option name="selectionMode" value="DROPDOWN" />
+      </SelectionState>
     </selectionStates>
   </component>
 </project>

DBTApp/app/src/main/java/de/cdaut/dbtapp/MainActivity.kt

@@ -30,6 +30,7 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import com.google.android.material.floatingactionbutton.FloatingActionButton
 import de.cdaut.dbtapp.components.BottomNavigationBar
+import de.cdaut.dbtapp.components.SkillsScreen
 import de.cdaut.dbtapp.navigation.Screens
 
 class MainActivity : ComponentActivity() {
@@ -60,7 +61,7 @@ private fun MainContent() {
                     Text("Tracking")
                 }
                 composable(Screens.Skillslist.route) {
-                    Text("Skillslist")
+                    SkillsScreen()
                 }
                 composable(Screens.Home.route) {
                     Text("Home")

DBTApp/app/src/main/java/de/cdaut/dbtapp/components/SkillsList.kt

@@ -1,7 +1,10 @@
 package de.cdaut.dbtapp.components
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.ScrollableState
+import androidx.compose.foundation.gestures.scrollable
 import androidx.compose.foundation.interaction.Interaction
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -13,11 +16,16 @@ 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.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Star
 import androidx.compose.material.icons.outlined.Star
 import androidx.compose.material.icons.outlined.StarOutline
 import androidx.compose.material3.Button
+import androidx.compose.material3.Card
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -27,6 +35,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -34,19 +43,40 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.em
 import de.cdaut.dbtapp.R
 import de.cdaut.dbtapp.model.Skill
+import de.cdaut.dbtapp.model.SkillCategory
+
+@Preview
+@Composable
+fun SkillsScreen() {
+    Column(
+        Modifier.verticalScroll(rememberScrollState())
+    ) {
+        SkillCategory.entries.forEach { skillCategory ->
+            SkillsCategoryCard(skillCategory.skills, skillCategory.title)
+            Spacer(Modifier.height(5.dp))
+        }
+    }
+}
 
 @Preview
 @Composable
 private fun SkillsCategoryCardPrev() {
-    SkillsCategoryCard(Skill.mockSkills())
+    SkillsCategoryCard(Skill.mockSkills(), "Skill")
 }
 
 @Composable
-fun SkillsCategoryCard(skills: List<Skill>) {
-    Column {
+fun SkillsCategoryCard(skills: List<Skill>, title: String) {
+    Card(
+        Modifier
+            .fillMaxWidth()
+            .padding(10.dp)
+    ) {
+        TitleText(
+            modifier = Modifier.padding(10.dp),
+            content = title
+        )
         skills.forEach { skill ->
             SingleSkillCard(skill.title, skill.description)
-            Spacer(modifier = Modifier.height(2.dp))
         }
     }
 }
@@ -69,7 +99,9 @@ private fun SingleSkillCard(title: String, description: String) {
         modifier = Modifier
             .fillMaxWidth()
             .height(IntrinsicSize.Min)
-            .background(Color.LightGray)
+            .background(Color.Transparent)
+            .padding(10.dp)
+            .background(Color.White, shape = RoundedCornerShape(5.dp))
             .padding(10.dp),
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically

DBTApp/app/src/main/java/de/cdaut/dbtapp/model/Skill.kt

@@ -13,6 +13,10 @@ class Skill(val title: String, val description: String) {
                 Skill(
                     title = "5-4-3-2-1",
                     description = "Hier kurz beschreiben wie die Übung funktioniert. Ggf. mehrere Zeilen aber nicht super lang"
+                ),
+                Skill(
+                    title = "UwU UwU awawawa",
+                    description = "Just arf a little like the good fopsgirl you are :3"
                 )
             )
         }

DBTApp/app/src/main/java/de/cdaut/dbtapp/model/SkillCategory.kt

@@ -0,0 +1,14 @@
+package de.cdaut.dbtapp.model
+
+import androidx.compose.foundation.layout.Arrangement
+
+enum class SkillCategory(val title: String, val skills: List<Skill> = Skill.mockSkills()) {
+    Mindfulness("Achtsamkeitsübungen"),
+    EmotionalRegulation("Emotionsregulation"),
+    MiddleWay("Mittelweg"),
+    StressTolerance("Stresstoleranz"),
+    SelfWorth("Selbstwert"),
+    Addiction("Sucht"),
+    Interpersonal("Zwischenmenschlich");
+}
+