Solution for UI lesson

app/src/main/kotlin/app/futured/academyproject/navigation/Destinations.kt

@@ -23,10 +23,15 @@ sealed class Destination(
     object Home : Destination(route = "home")
 
     object Detail : Destination(
-        route = "detail",
-        arguments = emptyList(),
+        route = "detail/{$PLACE_ID}",
+        arguments = listOf(
+            navArgument(PLACE_ID) {
+                type = NavType.IntType
+            },
+        ),
     ) {
-        fun buildRoute(): String = route
+        fun buildRoute(placeId: Int): String = route
+            .withArgument(PLACE_ID, placeId.toString())
     }
 }
 

app/src/main/kotlin/app/futured/academyproject/navigation/NavigationDestinations.kt

@@ -17,6 +17,6 @@ class NavigationDestinationsImpl(private val navController: NavController) : Nav
     }
 
     override fun navigateToDetailScreen(placeId: Int) {
-        // TODO: COMPOSE NAVIGATION
+        navController.navigate(Destination.Detail.buildRoute(placeId))
     }
 }

app/src/main/kotlin/app/futured/academyproject/ui/NavGraph.kt

@@ -25,6 +25,8 @@ fun NavGraph(
             HomeScreen(navigation)
         }
 
-        // TODO: COMPOSE NAVIGATION
+        composable(Destination.Detail) {
+            DetailScreen(navigation)
+        }
     }
 }

app/src/main/kotlin/app/futured/academyproject/ui/components/PlaceCard.kt

@@ -0,0 +1,90 @@
+package app.futured.academyproject.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.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import app.futured.academyproject.data.model.local.Place
+import app.futured.academyproject.tools.preview.PlacesProvider
+import app.futured.academyproject.ui.theme.Grid
+import coil.compose.rememberAsyncImagePainter
+import coil.request.ImageRequest
+import kotlinx.collections.immutable.PersistentList
+
+@Composable
+fun PlaceCard(place: Place, onClick: (Int) -> Unit, modifier: Modifier = Modifier) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = modifier
+            .clickable { onClick(place.id) }
+            .padding(vertical = Grid.d2, horizontal = Grid.d4)
+            .fillMaxWidth(),
+    ) {
+        Card(
+            colors = CardDefaults.cardColors(),
+            modifier = Modifier
+                .size(Grid.d15),
+        ) {
+            Image(
+                painter = rememberAsyncImagePainter(
+                    ImageRequest.Builder(LocalContext.current)
+                        .data(place.image1Url)
+                        .crossfade(true)
+                        .build(),
+                ),
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .aspectRatio(1f),
+            )
+        }
+
+        Column(
+            verticalArrangement = Arrangement.Center,
+            modifier = Modifier
+                .weight(1f)
+                .padding(vertical = Grid.d2, horizontal = Grid.d4),
+        ) {
+            Text(
+                text = place.name,
+                style = MaterialTheme.typography.titleMedium,
+                color = MaterialTheme.colorScheme.onSurface,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+            Spacer(modifier = Modifier.height(Grid.d1))
+            Text(
+                text = place.type,
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun PlaceCardPreview(@PreviewParameter(PlacesProvider::class) places: PersistentList<Place>) = Showcase {
+    PlaceCard(place = places.first(), onClick = {})
+}

app/src/main/kotlin/app/futured/academyproject/ui/screens/home/HomeScreen.kt

@@ -32,6 +32,7 @@ import app.futured.academyproject.tools.arch.EventsEffect
 import app.futured.academyproject.tools.arch.onEvent
 import app.futured.academyproject.tools.compose.ScreenPreviews
 import app.futured.academyproject.tools.preview.PlacesProvider
+import app.futured.academyproject.ui.components.PlaceCard
 import app.futured.academyproject.ui.components.Showcase
 import app.futured.academyproject.ui.theme.Grid
 import kotlinx.collections.immutable.PersistentList
@@ -44,7 +45,7 @@ fun HomeScreen(
     with(viewModel) {
         EventsEffect {
             onEvent<NavigateToDetailEvent> {
-                // TODO: COMPOSE NAVIGATION
+                navigation.navigateToDetailScreen(placeId = it.placeId)
             }
         }
 
@@ -85,7 +86,12 @@ object Home {
                     modifier = Modifier
                         .fillMaxSize(),
                 ) {
-                    // TODO: COMPOSE UI
+                    items(places) { place ->
+                        PlaceCard(
+                            place = place,
+                            onClick = actions::navigateToDetailScreen,
+                        )
+                    }
                 }
             },
         )