UI: JourneyCardDetail - Update UI

feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip_planner/ui/components/JourneyDetailCard.kt

@@ -1,25 +1,109 @@
 package xyz.ksharma.krail.trip_planner.ui.components
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
 import kotlinx.collections.immutable.toImmutableList
 import xyz.ksharma.krail.design.system.components.BasicJourneyCard
 import xyz.ksharma.krail.design.system.components.Text
-import xyz.ksharma.krail.design.system.preview.ComponentPreviews
 import xyz.ksharma.krail.design.system.theme.KrailTheme
+import xyz.ksharma.krail.design.system.toAdaptiveDecorativeIconSize
+import xyz.ksharma.krail.design.system.toAdaptiveSize
+import xyz.ksharma.krail.trip_planner.ui.R
 import xyz.ksharma.krail.trip_planner.ui.state.TransportMode
 import xyz.ksharma.krail.trip_planner.ui.state.TransportModeLine
 import xyz.ksharma.krail.trip_planner.ui.state.timetable.TimeTableState
 
+@Composable
+fun JourneyDetailCard(
+    timeToDeparture: String,
+    platformNumber: Char,
+    totalTravelTime: String,
+    legList: ImmutableList<TimeTableState.JourneyCardInfo.Leg>,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp, vertical = 12.dp)
+    ) {
+        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
+            Text(text = "In $timeToDeparture")
+            Text(text = "Platform $platformNumber")
+        }
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier.align(Alignment.CenterVertically),
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.ic_alert),
+                    contentDescription = "Wheelchair accessible",
+                    colorFilter = ColorFilter.tint(KrailTheme.colors.onPrimaryContainer),
+                    modifier = Modifier.size(14.dp.toAdaptiveDecorativeIconSize()),
+                )
+                Text(text = "In $timeToDeparture", modifier = Modifier.padding(start = 8.dp))
+            }
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier.align(Alignment.CenterVertically),
+            ) {
+                Image(
+                    painter = painterResource(R.drawable.ic_clock),
+                    contentDescription = null,
+                    colorFilter = ColorFilter.tint(color = KrailTheme.colors.onBackground),
+                    modifier = Modifier
+                        .padding(horizontal = 4.dp)
+                        .align(Alignment.CenterVertically)
+                        .size(14.dp.toAdaptiveSize()),
+                )
+                Text(
+                    text = totalTravelTime, style = KrailTheme.typography.bodyMedium,
+                )
+            }
+        }
+
+        legList.forEach {
+            JourneyLeg()
+        }
+    }
+}
+
+
+@Preview(showBackground = true)
+@Composable
+private fun PreviewJourneyDetailCard() {
+    KrailTheme {
+        JourneyDetailCard(
+            timeToDeparture = "5 mins",
+            platformNumber = '1',
+            totalTravelTime = "1h 30mins",
+            legList = persistentListOf(),
+        )
+    }
+}
+
+
 @OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun JourneyDetailCard(
@@ -77,7 +161,7 @@ fun JourneyDetailCard(
 
 // region Previews
 
-@ComponentPreviews
+//@ComponentPreviews
 @Composable
 private fun JourneyDetailCardPreview(modifier: Modifier = Modifier) {
     KrailTheme {

feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip_planner/ui/components/JourneyLeg.kt

@@ -0,0 +1,22 @@
+package xyz.ksharma.krail.trip_planner.ui.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import xyz.ksharma.krail.design.system.theme.KrailTheme
+
+@Composable
+fun JourneyLeg(modifier: Modifier = Modifier) {
+    Column(modifier = modifier) {
+
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun PreviewJourneyLeg() {
+    KrailTheme {
+        JourneyLeg()
+    }
+}

feature/trip-planner/ui/src/main/res/drawable/ic_alert.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M10,0C4.48,0 0,4.48 0,10C0,15.52 4.48,20 10,20C15.52,20 20,15.52 20,10C20,4.48 15.52,0 10,0ZM9,15V13H11V15H9ZM9,5V11H11V5H9Z"
+      android:fillColor="#FFFFFF"
+      android:fillType="evenOdd"/>
+</vector>