balance card

Ledger/app/src/main/java/at/xaxa/ledger/ui/LedgerUI.kt

@@ -34,6 +34,70 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.em
 import androidx.compose.ui.unit.sp
 
+// region Header Card
+@Composable
+fun HeaderCard(modifier: Modifier = Modifier, balance: String) {
+    Surface(
+        shape = RoundedCornerShape(12.dp),
+        color = Color(0xfff9f9f9),
+        border = BorderStroke(1.dp, Color(0xffc6c6c6)),
+        modifier = modifier
+            .requiredWidth(width = 360.dp)
+            .clip(shape = RoundedCornerShape(12.dp))
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp)
+        ) {
+            LayoutMediaTextHeader(modifier, balance)
+        }
+    }
+}
+
+@Composable
+fun LayoutMediaTextHeader(modifier: Modifier = Modifier, balance: String) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = modifier
+            .fillMaxWidth()
+    ) {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(4.dp, Alignment.Top),
+            horizontalAlignment = Alignment.End, // Align content to the right
+            modifier = Modifier
+                .weight(1f)
+        ) {
+            Text(
+                text = "your balance",
+                color = Color(0xff1b1b1b),
+                lineHeight = 1.5.em,
+                style = TextStyle(
+                    fontSize = 16.sp,
+                    fontWeight = FontWeight.Medium,
+                    letterSpacing = 0.15.sp
+                )
+            )
+            Text(
+                text = balance,
+                color = Color(0xff1b1b1b),
+                lineHeight = 1.43.em,
+                style = TextStyle(
+                    fontSize = 40.sp,
+                    letterSpacing = 0.25.sp
+                )
+            )
+        }
+    }
+}
+
+@Preview()
+@Composable
+private fun HeaderCardPreview() {
+    HeaderCard(Modifier, "-4500627.98€")
+}
+// endregion
+
 // region Horizontal Card
 @Composable
 fun HorizontalCard(modifier: Modifier = Modifier, name: String, date: String, amount:String) {