Android Compose practice

NotificationBox.kt

package com.example.uipractice.basic_layout

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.uipractice.ui.theme.UiPracticeTheme

data class NotificationItem(
    val title: String,
    val text: String,
    val date: String
)

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun NotificationBoxHomework(notificationItem: NotificationItem, modifier: Modifier = Modifier){
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(12.dp)

    ) {
        item{
            NotificationCard(notificationItem)
        }
    }
}

@Composable
fun NotificationCard(notificationItem: NotificationItem, modifier: Modifier = Modifier){
    Column(
        modifier = modifier
            .clip(RoundedCornerShape(5.dp)) // must come before background!
            .background(Color.Red)
            .padding(5.dp)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(12.dp),
            modifier = Modifier
                .padding(2.dp)
        ){
            Icon(
                imageVector = Icons.Default.CheckCircle,
                contentDescription = null,
                tint = Color.White,
                modifier = Modifier
                    .size(10.dp)
            )
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween
            ){
                Text(
                    text = notificationItem.title,
                    fontSize = 10.sp,
                    fontWeight = FontWeight.Bold,
                    color = Color.White,
                    maxLines = 2,
                    overflow = TextOverflow.Ellipsis,

                    modifier = Modifier
                        .weight(1f)
                )
                IconButton(
                    onClick = {},
                    modifier = Modifier
                        .width(10.dp)
                        .height(10.dp)
                ) {
                    Icon(
                        imageVector = Icons.Default.Settings,
                        contentDescription = null,
                        tint = Color.White,
                        modifier = Modifier
                            .size(10.dp)

                    )
                }
            }
        }
        Text(
            text = notificationItem.text,
            color = Color.White,
            fontSize = 8.sp,
            lineHeight = 10.sp,
            modifier = Modifier
                .padding(start = 28.dp, end = 5.dp)
        )
        Text(
            text = notificationItem.date,
            color = Color.White,
            fontSize = 8.sp,
            textAlign = TextAlign.End,
            modifier = Modifier
                .align(Alignment.End)
                .padding(end = 5.dp)
        )
    }
}


@Preview
@Composable
private fun NotificationBoxHomeworkPreview(){
    UiPracticeTheme {
        // Short version
       /* NotificationBoxHomework(
            notificationItem = NotificationItem(
                title = "My notification",
                text = "This is sample text",
                date = "Jan 5, 11:45"
            )
        )*/

        // Long version
        NotificationBoxHomework(
            notificationItem = NotificationItem(
                title = "My notification",
                text = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et est tellus. Donec placerat sodales arcu. Quisque malesuada iaculis est. Sed vestibulum enim est, eu venenatis eros egestas rhoncus. Praesent nec quam ipsum. Phasellus venenatis placerat enim, nec rhoncus nunc pretium quis. In id tincidunt purus. Donec pretium, magna hendrerit feugiat suscipit, nibh sem efficitur arcu, quis tempus mi felis id diam. Quisque tempor enim a est tempus, eget interdum eros ultricies. Aliquam fringilla rutrum sapien ut elementum. Sed consectetur justo lorem, sit amet hendrerit tortor tincidunt sed. Nulla dolor ligula, lobortis ut dapibus id, varius eu massa. Nullam ut pharetra dolor, id feugiat nisi. Suspendisse a lorem neque. Proin et sapien eu tortor venenatis tincidunt et et orci. Aliquam erat volutpat.
                """.trimIndent(),
                date = "Jan 5, 11:45"
            )
        )
    }
}