Here are going to create LazyColumn with click event. Below is the code breakdown
LazyColumn(
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(16.dp)
) {
items(items = list) { book ->
BookRow(book, navController)
}
}
@Preview
@Composable
fun BookRow(book: Item, navController: NavHostController) {
Card(
modifier = Modifier
.clickable {
navController.navigate(BookScreens.DetailsScreen.name + "/${book.id}")
}
.fillMaxWidth()
.height(100.dp)
.padding(3.dp),
shape = RectangleShape,
elevation = 7.dp
) {
Row(
modifier = Modifier
.padding(5.dp),
verticalAlignment = Alignment.Top
) {
val imageUrl: String = if (book.volumeInfo.imageLinks.smallThumbnail.isEmpty())
"https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=80&q=80"
else {
book.volumeInfo.imageLinks.smallThumbnail
}
Image(
painter = rememberImagePainter(data = imageUrl),
contentDescription = "book image",
modifier = Modifier
.width(80.dp)
.fillMaxHeight()
.padding(end = 4.dp),
)
Column {
Text(text = book.volumeInfo.title.toString(), overflow = TextOverflow.Ellipsis)
Text(
text = "Author: ${book.volumeInfo.authors}",
overflow = TextOverflow.Clip,
fontStyle = FontStyle.Italic,
style = MaterialTheme.typography.caption
)
Text(
text = "${book.volumeInfo.categories}",
overflow = TextOverflow.Clip,
fontStyle = FontStyle.Italic,
style = MaterialTheme.typography.caption
)
}
}
}
}