add:add official gallery

app/src/main/java/com/aiosman/riderpro/LocationDetail.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.gestures.ScrollableDefaults
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -102,7 +103,7 @@ fun LocationDetail() {
     val configuration = LocalConfiguration.current
     val officialGalleryItems = getOfficialGalleryItems()
     val feedItems = getFeedItems()
-
+    val navController = LocalNavController.current
     // 2/3 height of the screen
     fun getPeekHeight(): Dp {
 
@@ -211,7 +212,9 @@ fun LocationDetail() {
                             Image(
                                 painter = painterResource(id = R.drawable.rider_pro_nav_next),
                                 contentDescription = "Next",
-                                modifier = Modifier.size(24.dp)
+                                modifier = Modifier.size(24.dp).clickable {
+                                    navController.navigate("OfficialPhoto")
+                                }
                             )
                         }
 

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

@@ -92,6 +92,9 @@ fun NavigationController(navController: NavHostController) {
         composable(route="LocationDetail") {
             LocationDetail()
         }
+        composable(route="OfficialPhoto") {
+            OfficialGalleryPage()
+        }
     }
 }
 

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

@@ -0,0 +1,187 @@
+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.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+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.layout.ContentScale
+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 OfficialGalleryPage() {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp)
+    ) {
+        OfficialGalleryPageHeader()
+//        CertificationSection()
+        Spacer(modifier = Modifier.height(16.dp))
+        ImageGrid()
+    }
+}
+
+@Composable
+fun OfficialGalleryPageHeader() {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.rider_pro_nav_back), // Replace with your logo resource
+            contentDescription = "Logo",
+            modifier = Modifier.size(24.dp)
+        )
+        Spacer(modifier = Modifier.width(8.dp))
+        Text(text = "官方摄影师作品", fontWeight = FontWeight.Bold, fontSize = 16.sp)
+    }
+}
+
+@Composable
+fun CertificationSection() {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(Color(0xFFFFF3CD), RoundedCornerShape(8.dp))
+            .padding(16.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.ic_launcher_foreground), // Replace with your certification icon resource
+            contentDescription = "Certification Icon",
+            modifier = Modifier.size(24.dp)
+        )
+        Spacer(modifier = Modifier.width(8.dp))
+        Text(text = "成为认证摄影师", fontWeight = FontWeight.Bold, fontSize = 16.sp)
+        Spacer(modifier = Modifier.weight(1f))
+        Button(
+            onClick = { /*TODO*/ },
+
+            ) {
+            Text(text = "去认证", color = Color.White)
+        }
+    }
+}
+
+@Composable
+fun ImageGrid() {
+    val photographers = listOf(
+        Pair(
+            "Diego Morata",
+            R.drawable.rider_pro_moment_demo_1
+        ), // Replace with your image resources
+        Pair("Usha Oliver", R.drawable.rider_pro_moment_demo_2),
+        Pair("Mohsen Salehi", R.drawable.rider_pro_moment_demo_3),
+        Pair("Thanawan Chadee", R.drawable.rider_pro_moment_demo_1),
+        Pair("Photographer 5", R.drawable.rider_pro_moment_demo_2),
+        Pair("Photographer 6", R.drawable.rider_pro_moment_demo_3),
+        Pair(
+            "Diego Morata",
+            R.drawable.rider_pro_moment_demo_1
+        ), // Replace with your image resources
+        Pair("Usha Oliver", R.drawable.rider_pro_moment_demo_2),
+        Pair("Mohsen Salehi", R.drawable.rider_pro_moment_demo_3),
+        Pair("Thanawan Chadee", R.drawable.rider_pro_moment_demo_1),
+        Pair("Photographer 5", R.drawable.rider_pro_moment_demo_2),
+        Pair("Photographer 6", R.drawable.rider_pro_moment_demo_3),
+        Pair(
+            "Diego Morata",
+            R.drawable.rider_pro_moment_demo_1
+        ), // Replace with your image resources
+        Pair("Usha Oliver", R.drawable.rider_pro_moment_demo_2),
+        Pair("Mohsen Salehi", R.drawable.rider_pro_moment_demo_3),
+        Pair("Thanawan Chadee", R.drawable.rider_pro_moment_demo_1),
+        Pair("Photographer 5", R.drawable.rider_pro_moment_demo_2),
+        Pair("Photographer 6", R.drawable.rider_pro_moment_demo_3),
+        Pair(
+            "Diego Morata",
+            R.drawable.rider_pro_moment_demo_1
+        ), // Replace with your image resources
+        Pair("Usha Oliver", R.drawable.rider_pro_moment_demo_2),
+        Pair("Mohsen Salehi", R.drawable.rider_pro_moment_demo_3),
+        Pair("Thanawan Chadee", R.drawable.rider_pro_moment_demo_1),
+        Pair("Photographer 5", R.drawable.rider_pro_moment_demo_2),
+        Pair("Photographer 6", R.drawable.rider_pro_moment_demo_3)
+    )
+
+
+    LazyVerticalGrid(
+        columns = GridCells.Fixed(2),
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        items(photographers.size) { index ->
+            PhotographerCard(photographers[index].first, photographers[index].second)
+        }
+    }
+}
+
+@Composable
+fun PhotographerCard(name: String, imageRes: Int) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .clip(RoundedCornerShape(8.dp))
+            .background(Color.LightGray)
+    ) {
+        Image(
+            painter = painterResource(id = imageRes),
+            contentDescription = name,
+            contentScale = ContentScale.Crop,
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(270.dp)
+        )
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(Color(0x55000000))
+                .align(Alignment.BottomStart)
+        ) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(8.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.default_avatar), // Replace with your profile picture resource
+                    contentDescription = "Profile Picture",
+                    modifier = Modifier
+                        .size(24.dp)
+                        .clip(CircleShape)
+                )
+                Spacer(modifier = Modifier.width(8.dp))
+                Text(text = name, color = Color.White)
+            }
+        }
+
+    }
+}