Add favourite button, make tiles larger

app/src/main/java/com/ti/mobpo/ui/screens/PokeSearch.kt

@@ -4,6 +4,7 @@ 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.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
@@ -14,19 +15,30 @@ import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.outlined.FavoriteBorder
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 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.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.layout.layout
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.dp
 import com.ti.mobpo.R
 import com.ti.mobpo.ui.SearchBar
@@ -81,13 +93,14 @@ fun PokeSearch(pokeSearchViewModel: PokeSearchViewModel) {
 
 @Composable
 fun PokemonCard(pokemon: PokemonDetails) {
+    var isFavourite by remember { mutableStateOf(false) }
     Card(
         shape = MaterialTheme.shapes.medium,
         elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
         modifier = Modifier
             .padding(4.dp)
             .fillMaxWidth()
-            .aspectRatio(1f)
+            .aspectRatio(0.75f)
     ) {
         Column(
             modifier = Modifier.fillMaxSize(),
@@ -102,14 +115,38 @@ fun PokemonCard(pokemon: PokemonDetails) {
                     .fillMaxWidth()
                     .weight(1f)
             )
-            Text(
+            Row(
-                text = capitalizeFirstLetterAfterHyphens(pokemon.name),
+                verticalAlignment = Alignment.CenterVertically,
-                style = MaterialTheme.typography.bodySmall,
+                modifier = Modifier.fillMaxWidth()
-                modifier = Modifier
+            ) {
-                    .fillMaxWidth()
+                Text(
-                    .padding(horizontal = 8.dp, vertical = 4.dp) // Adjust padding as needed
+                    text = capitalizeFirstLetterAfterHyphens(pokemon.name),
-                    .wrapContentSize(Alignment.Center)
+                    modifier = Modifier
-            )
+                        .padding(8.dp)
+                        .weight(1f),
+                    maxLines = 2,
+                    overflow = TextOverflow.Ellipsis
+                )
+                IconButton(
+                    onClick = { isFavourite = !isFavourite },
+                    modifier = Modifier.wrapContentSize()
+                        .layout { measurable, constraints ->
+                            if (constraints.maxHeight == Constraints.Infinity) {
+                                layout(0, 0) {}
+                            } else {
+                                val placeable = measurable.measure(constraints)
+                                layout(placeable.width, placeable.height) {
+                                    placeable.place(0, 0)
+                                }
+                            }
+                        }
+                ) {
+                    Icon(
+                        imageVector = if (isFavourite) Icons.Filled.Favorite else Icons.Outlined.FavoriteBorder,
+                        contentDescription = "Favourite"
+                    )
+                }
+            }
         }
     }
 }