add:message list

app/src/main/java/com/aiosman/riderpro/MainActivity.kt

@@ -105,6 +105,9 @@ fun NavigationController(navController: NavHostController) {
         composable(route="ModificationList") {
             ModificationListScreen()
         }
+        composable(route="MyMessage") {
+            NotificationsScreen()
+        }
     }
 }
 

app/src/main/java/com/aiosman/riderpro/MessageList.kt

@@ -0,0 +1,238 @@
+package com.aiosman.riderpro
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+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.material3.HorizontalDivider
+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.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+
+
+@Preview(showBackground = true)
+@Composable
+fun NotificationsScreen() {
+    Column(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 24.dp, vertical = 16.dp)
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.rider_pro_message_title),
+                contentDescription = "Back",
+                modifier = Modifier.width(120.dp)
+            )
+        }
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            NotificationIndicator(10, R.drawable.rider_pro_like, "LIKE")
+            NotificationIndicator(10, R.drawable.rider_pro_followers, "FOLLOWERS")
+            NotificationIndicator(10, R.drawable.rider_pro_comments, "COMMENTS")
+        }
+        HorizontalDivider(color = Color(0xFFEbEbEb), modifier = Modifier.padding(16.dp))
+        NotificationCounterItem(24)
+        LazyColumn(
+            modifier = Modifier
+                .weight(1f)
+                .fillMaxSize()
+        ) {
+            item {
+                repeat(20) {
+                    MessageItem(
+                        MessageItemData(
+                            userName = "Onyama Limba",
+                            message = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                            timeAgo = "3 days ago",
+                            profileImage = R.drawable.default_avatar
+                        )
+                    )
+                }
+
+
+            }
+
+
+        }
+    }
+}
+
+@Composable
+fun NotificationIndicator(notificationCount: Int, iconRes: Int, label: String) {
+    Box(
+        modifier = Modifier
+    ) {
+        Box(
+            modifier = Modifier
+                .padding(16.dp)
+                .align(Alignment.TopCenter)
+        ) {
+            if (notificationCount > 0) {
+                Box(
+                    modifier = Modifier
+                        .background(Color(0xFFE53935), RoundedCornerShape(8.dp))
+                        .padding(4.dp)
+                        .align(Alignment.TopEnd)
+                ) {
+                    Text(
+                        text = notificationCount.toString(),
+                        color = Color.White,
+                        fontSize = 10.sp,
+                        fontWeight = FontWeight.Bold,
+                        modifier = Modifier.align(Alignment.Center)
+                    )
+                }
+            }
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                Box(
+                    modifier = Modifier.padding(16.dp)
+                ) {
+                    Image(
+                        painter = painterResource(id = iconRes),
+                        contentDescription = label,
+                        modifier = Modifier.size(24.dp)
+                    )
+                }
+                Box(
+                    modifier = Modifier
+                ) {
+                    Text(label, modifier = Modifier.align(Alignment.Center))
+                }
+
+            }
+        }
+    }
+
+}
+
+@Composable
+fun NotificationCounterItem(count: Int) {
+    Row(
+        modifier = Modifier.padding(vertical = 16.dp, horizontal = 32.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Box(
+
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.rider_pro_notification),
+                contentDescription = "",
+                modifier = Modifier
+                    .size(24.dp)
+
+            )
+
+        }
+        Spacer(modifier = Modifier.width(24.dp))
+        Text("NOTIFICATIONS", fontSize = 18.sp)
+        Spacer(modifier = Modifier.weight(1f))
+        if (count > 0) {
+            Box(
+                modifier = Modifier
+                    .background(Color(0xFFE53935), RoundedCornerShape(16.dp))
+                    .padding(horizontal = 8.dp, vertical = 2.dp)
+            ) {
+                Text(
+                    text = count.toString(),
+                    color = Color.White,
+                    fontSize = 12.sp,
+                    fontWeight = FontWeight.Bold,
+                    modifier = Modifier.padding(4.dp)
+                )
+            }
+        }
+    }
+}
+data class MessageItemData(
+    val userName: String,
+    val message: String,
+    val timeAgo: String,
+    val profileImage: Int
+)
+@Composable
+fun MessageItem(messageItemData: MessageItemData) {
+    Row(
+        modifier = Modifier.padding(16.dp)
+    ) {
+        Box() {
+            Image(
+                painter = painterResource(id = R.drawable.default_avatar),
+                contentDescription = "",
+                modifier = Modifier
+                    .size(48.dp)
+                    .clip(RoundedCornerShape(4.dp))
+            )
+        }
+        Column(
+            modifier = Modifier.weight(1f)
+        ) {
+            Text(
+                text = "Onyama Limba",
+                fontSize = 16.sp,
+                modifier = Modifier.padding(start = 16.dp)
+            )
+            Spacer(modifier = Modifier.height(8.dp))
+            Text(
+                text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                fontSize = 14.sp,
+                modifier = Modifier.padding(start = 16.dp),
+                maxLines = 1,
+                color = Color(0x99000000)
+            )
+        }
+//        Spacer(modifier = Modifier.weight(1f))
+        Column(
+            horizontalAlignment = Alignment.End
+        ) {
+            Text(
+                text = "3 days ago",
+                fontSize = 14.sp,
+                color = Color(0x66000000)
+            )
+            Spacer(modifier = Modifier.height(6.dp))
+            Box(
+                modifier = Modifier
+                    .clip(RoundedCornerShape(12.dp))
+                    .background(Color(0xFFE53935))
+                    .padding(4.dp)
+            ) {
+                Text(
+                    text = "24",
+                    color = Color.White,
+                    fontSize = 12.sp,
+                    fontWeight = FontWeight.Bold,
+                    modifier = Modifier.align(Alignment.Center)
+                )
+            }
+        }
+    }
+}

app/src/main/java/com/aiosman/riderpro/Profile.kt

@@ -171,7 +171,9 @@ fun CommunicationOperatorGroup(){
         }
         Box(modifier = Modifier
             .size(width = 142.dp, height = 40.dp)
-            .padding(start = 6.dp),
+            .padding(start = 6.dp).clickable {
+                navController.navigate("MyMessage")
+            },
             contentAlignment = Alignment.Center){
             Image(modifier = Modifier.fillMaxSize(),painter = painterResource(id = R.drawable.rider_pro_profile_message), contentDescription = "")
             Text(text = "MESSAGE", fontSize = 16.sp, color = Color.White, style = TextStyle(fontWeight = FontWeight.Bold))