Avatars

@Composable
fun AvatarPhoto(imageUrl: String, modifier: Modifier = Modifier) {
    AsyncImage(
        model = imageUrl,
        modifier = modifier.size(40.dp).clip(CircleShape).background(Color.White).border(2.dp, Color.White, CircleShape),
        contentScale = ContentScale.Crop,
        contentDescription = "Avatar",
    )
}

Column(Modifier.padding(24.dp), verticalArrangement = Arrangement.spacedBy(24.dp), horizontalAlignment = Alignment.CenterHorizontally) {
    Row(horizontalArrangement = Arrangement.spacedBy((-12).dp), verticalAlignment = Alignment.CenterVertically) {
        AvatarPhoto(modifier = Modifier.size(32.dp), imageUrl = "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?fit=crop&w=512&q=80")
        AvatarPhoto(modifier = Modifier.zIndex(25f).size(40.dp), imageUrl = "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?fit=crop&w=512&q=80")
        AvatarPhoto(modifier = Modifier.zIndex(50f).size(48.dp), imageUrl = "https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?fit=crop&w=512&q=80")
        AvatarPhoto(modifier = Modifier.zIndex(25f).size(40.dp), imageUrl = "https://images.unsplash.com/photo-1540569014015-19a7be504e3a?fit=crop&w=512&q=80")
        AvatarPhoto(modifier = Modifier.size(32.dp), imageUrl = "https://images.unsplash.com/photo-1506863530036-1efeddceb993?fit=crop&w=512&q=80")
    }

    Row(horizontalArrangement = Arrangement.spacedBy((-12).dp), verticalAlignment = Alignment.CenterVertically) {
        AvatarPhoto(imageUrl = "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?fit=crop&w=512&q=80")
        AvatarPhoto(imageUrl = "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?fit=crop&w=512&q=80")
        AvatarPhoto(imageUrl = "https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?fit=crop&w=512&q=80")
        AvatarPhoto(imageUrl = "https://images.unsplash.com/photo-1540569014015-19a7be504e3a?fit=crop&w=512&q=80")
        AvatarPhoto(imageUrl = "https://images.unsplash.com/photo-1506863530036-1efeddceb993?fit=crop&w=512&q=80")
    }
}

@Composable
fun NiceTry(){
    Column {
        BasicText("Nice try. Use code COMPOSE10 for a 10% discount on checkout ;)")
    }
}

@Composable
fun NiceTry(){
    Column {
        BasicText("Nice try. Use code COMPOSE10 for a 10% discount on checkout ;)")
    }
}