diff --git a/app/build.gradle.kts b/app/build.gradle.kts index 360f9ab..796bb03 100644 --- a/app/build.gradle.kts +++ b/app/build.gradle.kts @@ -66,6 +66,7 @@ dependencies { debugImplementation(libs.androidx.ui.test.manifest) implementation("androidx.navigation:navigation-compose:$nav_version") implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1") - implementation("com.squareup.retrofit2:retrofit:2.9.0") - implementation("com.squareup.retrofit2:converter-gson:2.9.0") + implementation("com.squareup.retrofit2:retrofit:2.11.0") + implementation("com.squareup.retrofit2:converter-gson:2.11.0") + implementation("io.coil-kt:coil-compose:2.6.0") } \ No newline at end of file diff --git a/app/src/main/java/com/ti/mobpo/ui/screens/PokeSearch.kt b/app/src/main/java/com/ti/mobpo/ui/screens/PokeSearch.kt index c50fe64..e43013c 100644 --- a/app/src/main/java/com/ti/mobpo/ui/screens/PokeSearch.kt +++ b/app/src/main/java/com/ti/mobpo/ui/screens/PokeSearch.kt @@ -1,24 +1,40 @@ package com.ti.mobpo.ui.screens +import androidx.compose.foundation.Image import com.ti.mobpo.ui.PokeSearchViewModel import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.lazy.grid.GridCells +import androidx.compose.foundation.lazy.grid.LazyVerticalGrid +import androidx.compose.foundation.lazy.grid.items +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.runtime.collectAsState import androidx.compose.runtime.getValue 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.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.ti.mobpo.R import com.ti.mobpo.ui.SearchBar import androidx.lifecycle.viewmodel.compose.viewModel +import com.ti.mobpo.model.PokemonDetails +import coil.compose.AsyncImage +import coil.request.ImageRequest +import com.ti.mobpo.ui.theme.MobileSecurityTheme @Composable fun PokeSearchScreen(pokeSearchViewModel: PokeSearchViewModel) { @@ -44,8 +60,12 @@ fun PokeSearch(pokeSearchViewModel: PokeSearchViewModel) { searchResults?.let { results -> if (results.isNotEmpty()) { - results.forEach { pokemon -> - Text(text = pokemon.name) + LazyVerticalGrid( + columns = GridCells.Adaptive(150.dp), + ) { + items(items = results, key = { pokemon -> pokemon.id }) { pokemon -> + PokemonCard(pokemon) + } } } else { Text("No results found") @@ -54,9 +74,38 @@ fun PokeSearch(pokeSearchViewModel: PokeSearchViewModel) { } } + +@Composable +fun PokemonCard(pokemon: PokemonDetails) { + Card( + shape = MaterialTheme.shapes.medium, + elevation = CardDefaults.cardElevation(defaultElevation = 8.dp), + modifier = Modifier + .padding(4.dp) + .fillMaxWidth() + .aspectRatio(1f) + ) { + AsyncImage( + model = ImageRequest.Builder(context = LocalContext.current).data(pokemon.sprites.other.officialArtwork.frontDefault) + .crossfade(true).build(), + contentDescription = pokemon.name, + contentScale = ContentScale.Crop, + modifier = Modifier.fillMaxWidth() + ) + } +} + + @Preview(showBackground = true) @Composable fun PokeSearchApp(){ val pokeSearchViewModel: PokeSearchViewModel = viewModel() PokeSearchScreen(pokeSearchViewModel) +} + +@Preview(showBackground = true) +@Composable +fun PhotosGridScreenPreview() { + MobileSecurityTheme { + } } \ No newline at end of file