Skills cards

DBTApp/.idea/deploymentTargetSelector.xml

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

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

@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -30,11 +31,37 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.em
 import de.cdaut.dbtapp.R
+import de.cdaut.dbtapp.model.Skill
 
 @Preview
 @Composable
-private fun SingleSkillCard() {
+private fun SkillsCategoryCardPrev() {
+    SkillsCategoryCard(Skill.mockSkills())
+}
+
+@Composable
+fun SkillsCategoryCard(skills: List<Skill>) {
+    Column {
+        skills.forEach { skill ->
+            SingleSkillCard(skill.title, skill.description)
+            Spacer(modifier = Modifier.height(2.dp))
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun SingleSkillsCardPreview() {
+    SingleSkillCard(
+        "5-4-3-2-1",
+        "Hier kurz beschreiben wie die Übung funktioniert. Ggf. mehrere Zeilen aber nicht super lang"
+    )
+}
+
+@Composable
+private fun SingleSkillCard(title: String, description: String) {
     var selected by remember {
         mutableStateOf(false)
     }
@@ -50,12 +77,13 @@ private fun SingleSkillCard() {
         Column(
             modifier = Modifier
                 .fillMaxHeight()
-                .padding(6.dp),
+                .fillMaxWidth(fraction = 0.8f),
             verticalArrangement = Arrangement.SpaceBetween,
 
             ) {
-            Text("Titel")
-            Text("Beschreibung")
+            TitleText(title)
+            Spacer(modifier = Modifier.height(10.dp))
+            DescriptionText(description)
         }
 
         Icon(

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

@@ -0,0 +1,44 @@
+package de.cdaut.dbtapp.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.sp
+
+@Preview
+@Composable
+private fun PreviewTexts() {
+    Column(
+        modifier = Modifier.background(Color.White)
+    ) {
+        TitleText("Test Hallo :3")
+        DescriptionText("lorem ipsum dolor sid amnet consequetur blabla yada yada")
+    }
+}
+
+@Composable
+fun TitleText(content: String, modifier: Modifier = Modifier) {
+    Text(
+        text = content,
+        modifier = modifier,
+        fontSize = 20.sp,
+        fontWeight = FontWeight.Bold
+    )
+}
+
+@Composable
+fun DescriptionText(content: String, modifier: Modifier = Modifier) {
+    Text(
+        text = content,
+        modifier = modifier,
+        fontSize = 17.sp,
+        fontWeight = FontWeight.Light
+    )
+}

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

@@ -0,0 +1,20 @@
+package de.cdaut.dbtapp.model
+
+class Skill(val title: String, val description: String) {
+
+
+    companion object {
+        fun mockSkills(): List<Skill> {
+            return listOf(
+                Skill(
+                    title = "Test Hallo :3",
+                    description = "lorem ipsum dolor sid amnet consequetur blabla yada yada"
+                ),
+                Skill(
+                    title = "5-4-3-2-1",
+                    description = "Hier kurz beschreiben wie die Übung funktioniert. Ggf. mehrere Zeilen aber nicht super lang"
+                )
+            )
+        }
+    }
+}