add:add official photographer

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

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

app/src/main/java/com/aiosman/riderpro/OfficialGallery.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
@@ -145,6 +146,7 @@ fun ImageGrid() {
 
 @Composable
 fun PhotographerCard(name: String, imageRes: Int) {
+    val navController = LocalNavController.current
     Box(
         modifier = Modifier
             .fillMaxSize()
@@ -168,7 +170,10 @@ fun PhotographerCard(name: String, imageRes: Int) {
             Row(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(8.dp),
+                    .padding(8.dp)
+                    .clickable {
+                        navController.navigate("OfficialPhotographer")
+                    },
                 verticalAlignment = Alignment.CenterVertically
             ) {
                 Image(

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

@@ -0,0 +1,279 @@
+package com.aiosman.riderpro
+
+import android.util.Log
+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.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+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.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+data class ArtWork(
+    val id: Int,
+    val resId: Int,
+)
+
+fun GenerateMockArtWorks(): List<ArtWork> {
+    val pickupImage = listOf(
+        R.drawable.default_avatar,
+        R.drawable.default_moment_img,
+        R.drawable.rider_pro_moment_demo_1,
+        R.drawable.rider_pro_moment_demo_2,
+        R.drawable.rider_pro_moment_demo_3,
+    )
+    return List(30) {
+        ArtWork(
+            id = it,
+            resId = pickupImage.random()
+        )
+    }
+}
+
+@OptIn(ExperimentalLayoutApi::class)
+@Preview
+@Composable
+fun OfficialPhotographer() {
+    val lazyListState = rememberLazyListState()
+    var artWorks by remember { mutableStateOf<List<ArtWork>>(emptyList()) }
+    LaunchedEffect(Unit) {
+        artWorks = GenerateMockArtWorks()
+    }
+    // Observe the scroll state and calculate opacity
+    val alpha by remember {
+        derivedStateOf {
+            // Example calculation: Adjust the range and formula as needed
+            val alp = minOf(1f, lazyListState.firstVisibleItemScrollOffset / 900f)
+            Log.d("alpha", "alpha: $alp")
+            alp
+        }
+    }
+    Scaffold { paddingValues ->
+
+        Box(
+            modifier = Modifier
+                .background(Color.Black)
+                .padding(paddingValues)
+
+        ) {
+            LazyColumn(
+                modifier = Modifier.fillMaxSize(),
+                state = lazyListState
+            ) {
+                item {
+                    Box(
+                        modifier = Modifier
+                            .height(400.dp)
+                            .fillMaxWidth()
+                    ) {
+                        Image(
+                            painter = painterResource(id = R.drawable.default_moment_img),
+                            contentDescription = "Logo",
+                            contentScale = ContentScale.Crop,
+                            modifier = Modifier.fillMaxSize()
+                        )
+                        // top bar
+
+                        // on bottom of box
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .height(120.dp)
+                                .background(
+                                    brush = Brush.verticalGradient(
+                                        colors = listOf(
+                                            Color.Black.copy(alpha = 1f),
+                                            Color.Black.copy(alpha = 1f),
+                                            Color.Black.copy(alpha = 0f),
+                                        ),
+                                        startY = Float.POSITIVE_INFINITY,
+                                        endY = 0f
+                                    )
+                                )
+                                .padding(16.dp)
+                                .align(alignment = androidx.compose.ui.Alignment.BottomCenter)
+
+                        ) {
+                            Column(
+                                modifier = Modifier.fillMaxSize(),
+                            ) {
+                                Row(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .weight(1f),
+                                    verticalAlignment = Alignment.CenterVertically
+                                ) {
+                                    Image(
+                                        painter = painterResource(id = R.drawable.default_avatar),
+                                        contentDescription = "",
+                                        modifier = Modifier
+                                            .size(32.dp)
+                                            .clip(CircleShape) // Clip the image to a circle
+                                    )
+                                    Spacer(modifier = Modifier.width(8.dp))
+                                    // name
+                                    Text("Onyama Limba", color = Color.White, fontSize = 14.sp)
+                                    Spacer(modifier = Modifier.width(8.dp))
+                                    // round box
+                                    Box(
+                                        modifier = Modifier
+                                            .background(Color.Red, CircleShape)
+                                            .padding(horizontal = 8.dp, vertical = 4.dp)
+                                    ) {
+                                        // certification
+                                        Text("摄影师", color = Color.White, fontSize = 12.sp)
+                                    }
+                                    Spacer(modifier = Modifier.weight(1f))
+                                    IconButton(
+                                        onClick = { /*TODO*/ },
+                                        modifier = Modifier.size(32.dp)
+                                    ) {
+                                        Icon(
+                                            imageVector = Icons.Filled.Favorite,
+                                            contentDescription = null,
+                                            tint = Color.White
+                                        )
+                                    }
+                                    Spacer(modifier = Modifier.width(4.dp))
+                                    Text("123", color = Color.White)
+                                    Spacer(modifier = Modifier.width(8.dp))
+                                    IconButton(
+                                        onClick = {},
+                                        modifier = Modifier.size(32.dp)
+                                    ) {
+                                        Image(
+                                            painter = painterResource(id = R.drawable.rider_pro_eye),
+                                            contentDescription = "",
+                                            modifier = Modifier
+                                                .size(24.dp)
+                                        )
+                                    }
+                                    Spacer(modifier = Modifier.width(4.dp))
+                                    Text("123", color = Color.White)
+
+                                }
+                                Box(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .weight(1f)
+                                ) {
+                                    // description
+                                    Text(
+                                        "摄影师 Diego Morata 的作品",
+                                        color = Color.White,
+                                        modifier = Modifier.align(Alignment.Center)
+                                    )
+                                }
+                            }
+
+                            // circle avatar
+
+                        }
+
+                    }
+                    val screenWidth = LocalConfiguration.current.screenWidthDp.dp
+                    val imageSize =
+                        (screenWidth - (4.dp * 4)) / 3 // Subtracting total padding and divi
+                    val itemWidth = screenWidth / 3 - 4.dp * 2
+                    FlowRow(
+                        modifier = Modifier.padding(4.dp),
+                        horizontalArrangement = Arrangement.spacedBy(4.dp),
+                        verticalArrangement = Arrangement.spacedBy(4.dp),
+                        maxItemsInEachRow = 3
+                    ) {
+                        for (artWork in artWorks) {
+                            Box(
+                                modifier = Modifier
+                                    .width(itemWidth)
+                                    .aspectRatio(1f)
+                                    .background(Color.Gray)
+                            ) {
+                                Image(
+                                    painter = painterResource(id = artWork.resId),
+                                    contentDescription = "",
+                                    contentScale = ContentScale.Crop,
+                                    modifier = Modifier
+                                        .width(imageSize)
+                                        .aspectRatio(1f)
+                                )
+                            }
+                        }
+
+                    }
+                }
+            }
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(64.dp)
+                    .background(Color.Black.copy(alpha = alpha))
+                    .padding(horizontal = 16.dp)
+            ) {
+                Row(
+                    modifier = Modifier.fillMaxSize(),
+                    verticalAlignment = androidx.compose.ui.Alignment.CenterVertically,
+                ) {
+                    Image(
+                        painter = painterResource(id = R.drawable.rider_pro_nav_back),
+                        colorFilter = androidx.compose.ui.graphics.ColorFilter.tint(Color.White),
+                        contentDescription = "",
+                        modifier = Modifier
+                            .size(32.dp)
+                            .clip(CircleShape) // Clip the image to a circle
+                    )
+                    if (alpha == 1f) {
+                        Spacer(modifier = Modifier.width(8.dp))
+                        Image(
+                            painter = painterResource(id = R.drawable.default_avatar),
+                            contentDescription = "",
+                            modifier = Modifier
+                                .size(32.dp)
+                                .clip(CircleShape) // Clip the image to a circle
+
+                        )
+                        Spacer(modifier = Modifier.width(8.dp))
+                        Text("Onyama Limba", color = Color.White)
+                    }
+                }
+
+            }
+        }
+
+    }
+}