Weather Card implementation using Jetpack Compose

WeatherCard.kt

//// Pager gradle dependency ////
implementation "com.google.accompanist:accompanist-pager:0.9.0"
implementation "com.google.accompanist:accompanist-pager-indicators:0.9.0"


// Data model
data class WeatherCard(
    val time: String,
    val message: String,
)


// Single card
@Composable
fun WeatherUpdateCard(weatherCard: WeatherCard) {
    Box {
        Card(
            shape = RoundedCornerShape(16.dp),
            modifier = Modifier
                .padding(top = 40.dp, start = 16.dp, end = 16.dp, bottom = 8.dp)
        ) {
            Column(
                modifier = Modifier.padding(16.dp)
            ) {

                Spacer(modifier = Modifier.height(24.dp))

                Text(
                    text = weatherCard.time, // "20 minutes ago",
                    style = MaterialTheme.typography.caption
                )

                Spacer(modifier = Modifier.height(8.dp))

                Text(
                    text = weatherCard.message, // "If you don't want to get wet today, don't forget your umbrella.",
                    style = MaterialTheme.typography.body1
                )

                Spacer(modifier = Modifier.height(24.dp))
            }
        }

        Image(
            painter = painterResource(id = R.drawable.cloudy),
            contentDescription = "weather overlap image",
            modifier = Modifier
                .size(100.dp)
                .align(alignment = Alignment.TopEnd)
                .offset(x = (-40).dp)
        )
    }
}

// Carousel
@OptIn(ExperimentalPagerApi::class)
@Composable
fun WeatherCardCarousel(cards: List<WeatherCard>) {
    val pagerState = rememberPagerState(pageCount = cards.size)
    Column {
        HorizontalPager(
            state = pagerState
        ) { page ->
            WeatherUpdateCard(cards[page])
        }

        HorizontalPagerIndicator(
            pagerState = pagerState,
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .padding(16.dp),
        )
    }
}


//// mock data /////
 val weatherCards = listOf(
        WeatherCard(
            time = "2 minutes ago",
            message = "The air quality is ideal for most individuals; enjoy your normal outdoor activities and be safe       "
        ),
        WeatherCard(
            time = "7 minutes ago",
            message = "The maximum temperature recorded in the city on Wednesday was 40.5 degrees Celsius and it's climbing"
        ),
        WeatherCard(
            time = "15 minutes ago",
            message = "The wet weather will also have a cooling effect on the northeastern region for the next five days."
        ),
        WeatherCard(
            time = "38 minutes ago",
            message = "The IMD has forecast rain in the capital on Thursday evening, and also on Tuesday, Monday next week"
        ),
    )