add:comment list

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

@@ -0,0 +1,137 @@
+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.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
+@Composable
+fun CommentsScreen() {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(color = Color(0xFFFFFFFF))
+            .padding(16.dp)
+    ) {
+        LikesScreenHeader()
+        Spacer(modifier = Modifier.height(28.dp))
+        LazyColumn(
+            modifier = Modifier.weight(1f)
+        ) {
+            item {
+                repeat(20) {
+                    CommentsItem()
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun LikesScreenHeader() {
+    Row(
+        modifier = Modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Image(
+            painter = painterResource(id = R.drawable.rider_pro_nav_back),
+            contentDescription = "Likes",
+            modifier = Modifier.size(16.dp)
+        )
+        Spacer(modifier = Modifier.size(12.dp))
+        Text("Comments", fontWeight = FontWeight.Bold, fontSize = 17.sp)
+        Spacer(modifier = Modifier.weight(1f))
+        Image(
+            painter = painterResource(id = R.drawable.rider_pro_more_horizon),
+            contentDescription = "More",
+            modifier = Modifier.size(24.dp)
+        )
+
+    }
+}
+
+@Composable
+fun CommentsItem() {
+    Box(
+        modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp)
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.default_avatar),
+                contentDescription = "Avatar",
+                modifier = Modifier
+                    .size(40.dp)
+            )
+            Spacer(modifier = Modifier.size(12.dp))
+            Column(
+                modifier = Modifier.weight(1f)
+            ) {
+                Text("Username", fontWeight = FontWeight.Bold, fontSize = 16.sp)
+                Spacer(modifier = Modifier.size(4.dp))
+                Text("Content", color = Color(0x99000000), fontSize = 12.sp)
+                Spacer(modifier = Modifier.size(4.dp))
+                Text("Date", color = Color(0x99000000), fontSize = 12.sp)
+                Spacer(modifier = Modifier.height(16.dp))
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Image(
+                        painter = painterResource(id = R.drawable.rider_pro_like),
+                        contentDescription = "Like",
+                        modifier = Modifier.size(16.dp),
+                    )
+                    Text(
+                        "270",
+                        color = Color(0x99000000),
+                        fontSize = 12.sp,
+                        modifier = Modifier.padding(start = 4.dp)
+                    )
+                    Spacer(modifier = Modifier.width(45.dp))
+                    Image(
+                        painter = painterResource(id = R.drawable.rider_pro_comments),
+                        contentDescription = "Comments",
+                        modifier = Modifier.size(16.dp)
+                    )
+                    Text(
+                        "270",
+                        color = Color(0x99000000),
+                        fontSize = 12.sp,
+                        modifier = Modifier.padding(start = 4.dp)
+                    )
+                }
+            }
+            Box {
+                Image(
+                    painter = painterResource(id = R.drawable.default_moment_img),
+                    contentDescription = "More",
+                    modifier = Modifier.size(64.dp)
+                )
+            }
+        }
+    }
+}

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

@@ -108,6 +108,9 @@ fun NavigationController(navController: NavHostController) {
         composable(route="MyMessage") {
             NotificationsScreen()
         }
+        composable(route="Comments") {
+            CommentsScreen()
+        }
     }
 }
 

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

@@ -2,6 +2,7 @@ package com.aiosman.riderpro
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -29,10 +30,10 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 
 
-
 @Preview(showBackground = true)
 @Composable
 fun NotificationsScreen() {
+    val navController = LocalNavController.current
     Column(
         modifier = Modifier.fillMaxSize()
     ) {
@@ -53,9 +54,16 @@ fun NotificationsScreen() {
                 .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")
+            NotificationIndicator(10, R.drawable.rider_pro_like, "LIKE") {
+
+            }
+            NotificationIndicator(10, R.drawable.rider_pro_followers, "FOLLOWERS"){
+
+            }
+            NotificationIndicator(10, R.drawable.rider_pro_comments, "COMMENTS"){
+                navController.navigate("Comments")
+
+            }
         }
         HorizontalDivider(color = Color(0xFFEbEbEb), modifier = Modifier.padding(16.dp))
         NotificationCounterItem(24)
@@ -85,7 +93,12 @@ fun NotificationsScreen() {
 }
 
 @Composable
-fun NotificationIndicator(notificationCount: Int, iconRes: Int, label: String) {
+fun NotificationIndicator(
+    notificationCount: Int,
+    iconRes: Int,
+    label: String,
+    onClick: () -> Unit
+) {
     Box(
         modifier = Modifier
     ) {
@@ -93,6 +106,9 @@ fun NotificationIndicator(notificationCount: Int, iconRes: Int, label: String) {
             modifier = Modifier
                 .padding(16.dp)
                 .align(Alignment.TopCenter)
+                .clickable {
+                    onClick()
+                }
         ) {
             if (notificationCount > 0) {
                 Box(
@@ -172,12 +188,14 @@ fun NotificationCounterItem(count: Int) {
         }
     }
 }
+
 data class MessageItemData(
     val userName: String,
     val message: String,
     val timeAgo: String,
     val profileImage: Int
 )
+
 @Composable
 fun MessageItem(messageItemData: MessageItemData) {
     Row(