更新 UI

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

@@ -6,18 +6,21 @@ 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.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBars
 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.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 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.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -30,6 +33,23 @@ import androidx.compose.ui.unit.sp
 @Preview
 @Composable
 fun LikePage() {
+    val model = LikePageViewModel
+    val coroutineScope = rememberCoroutineScope()
+    val listState = rememberLazyListState()
+
+    // observe list scrolling
+    val reachedBottom: Boolean by remember {
+        derivedStateOf {
+            val lastVisibleItem = listState.layoutInfo.visibleItemsInfo.lastOrNull()
+            lastVisibleItem?.index != 0 && lastVisibleItem?.index == listState.layoutInfo.totalItemsCount - 3
+        }
+    }
+    LaunchedEffect(Unit) {
+        model.loader.loadData()
+    }
+    LaunchedEffect(reachedBottom) {
+        if (reachedBottom) model.loader.loadMore()
+    }
     StatusBarMaskLayout(
         darkIcons = true,
         maskBoxBackgroundColor = Color(0xFFFFFFFF)
@@ -43,26 +63,28 @@ fun LikePage() {
             NoticeScreenHeader("LIKES")
             Spacer(modifier = Modifier.height(28.dp))
             LazyColumn(
-                modifier = Modifier.weight(1f)
+                modifier = Modifier.weight(1f),
-            ) {
+                state = listState,
-                item {
-                    repeat(20) {
-                        LikeItem()
 
-                    }
+                ) {
+                items(model.loader.list, key = { it.id }) {
+                    LikeItem(it)
+                }
+                item {
                     BottomNavigationPlaceholder()
                 }
-
             }
 
+
         }
     }
 
+
 }
 
 
 @Composable
-fun LikeItem() {
+fun LikeItem(itemData: LikeItemData) {
     Box(
         modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp)
     ) {
@@ -79,7 +101,7 @@ fun LikeItem() {
             Column(
                 modifier = Modifier.weight(1f)
             ) {
-                Text("Username", fontWeight = FontWeight.Bold, fontSize = 16.sp)
+                Text(itemData.name, fontWeight = FontWeight.Bold, fontSize = 16.sp)
                 Spacer(modifier = Modifier.height(5.dp))
                 Text("Username", fontSize = 12.sp, color = Color(0x99000000))
             }

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

@@ -0,0 +1,65 @@
+package com.aiosman.riderpro
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.lifecycle.ViewModel
+
+class LikeDataSource : MockDataSource<LikeItemData>() {
+    init {
+        var newList = mutableListOf<LikeItemData>()
+        for (i in 0..999) {
+            newList.add(LikeItemData(i, "Like $i"))
+        }
+        list = newList
+    }
+}
+abstract class DataLoader<T> {
+    var list = mutableListOf<T>()
+    var page by mutableStateOf(1)
+    var pageSize by mutableStateOf(20)
+    var total by mutableStateOf(0)
+    var noMoreData by mutableStateOf(false)
+
+    suspend fun loadData() {
+        val resp = fetchData(page, pageSize)
+        if (resp.success) {
+            resp.data?.let {
+                total = it.total
+                list = it.list.toMutableList()
+                if (it.list.size < pageSize) {
+                    noMoreData = true
+                }
+            }
+        }
+    }
+    suspend fun loadMore(){
+        if (list.size >= total) return
+        page++
+        val resp = fetchData(page, pageSize)
+        if (resp.success) {
+            resp.data?.let {
+                total = it.total
+                list.addAll(it.list)
+                if (it.list.size < pageSize) {
+                    noMoreData = true
+                }
+            }
+        }
+    }
+    abstract suspend fun fetchData(page: Int, pageSize: Int): MockDataContainer<MockListContainer<T>>
+}
+class LikeListLoader : DataLoader<LikeItemData>() {
+    var mockDataSource = LikeDataSource()
+    override suspend fun fetchData(page: Int, pageSize: Int): MockDataContainer<MockListContainer<LikeItemData>> {
+        return mockDataSource.fetchData(page, pageSize)
+    }
+}
+object LikePageViewModel : ViewModel() {
+    val loader = LikeListLoader()
+}
+
+data class LikeItemData(
+    val id: Int,
+    val name: String,
+)

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

@@ -17,7 +17,6 @@ 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.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -34,7 +33,6 @@ import androidx.compose.material3.BottomSheetScaffold
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SheetState
 import androidx.compose.material3.SheetValue
@@ -43,7 +41,6 @@ import androidx.compose.material3.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
@@ -54,8 +51,6 @@ 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.layout.onGloballyPositioned
-import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
@@ -64,7 +59,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import kotlinx.coroutines.launch
 
 data class OfficialGalleryItem(
     val id: Int,
@@ -153,6 +147,7 @@ fun LocationDetail() {
                 // Assuming index 0 corresponds to the top of the feed
                 showGalleryAndInfo = index == 0
             }
+
     }
     Box(
         modifier = Modifier.fillMaxSize()
@@ -200,6 +195,7 @@ fun LocationDetail() {
                         )
 
                     }
+                    Spacer(modifier = Modifier.height(16.dp))
 
                     GalleryAndInfo(showGalleryAndInfo)
                     // feed
@@ -234,6 +230,7 @@ fun LocationDetail() {
                         contentPadding = PaddingValues(16.dp),
                         horizontalArrangement = Arrangement.spacedBy(16.dp),
                         flingBehavior = ScrollableDefaults.flingBehavior(),
+
                     ) {
                         items(feedItems) { item ->
                             Column(

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

@@ -8,6 +8,7 @@ import androidx.activity.enableEdgeToEdge
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -20,16 +21,26 @@ import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material3.Icon
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.NavigationBarItemColors
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
+import androidx.compose.material3.Tab
+import androidx.compose.material3.TabRow
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -37,6 +48,7 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.core.view.WindowCompat
+import androidx.navigation.NavGraph
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
@@ -45,6 +57,7 @@ import androidx.navigation.compose.rememberNavController
 import com.aiosman.riderpro.ui.theme.RiderProTheme
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import com.google.android.libraries.places.api.Places
+import kotlinx.coroutines.launch
 
 
 class MainActivity : ComponentActivity() {
@@ -73,12 +86,7 @@ fun NavigationController(navController: NavHostController) {
     NavHost(
         navController = navController,
         startDestination = NavigationItem.Home.route,
-        enterTransition = {
+    ) {
-            fadeIn(animationSpec = tween(0))
-        },
-        exitTransition = {
-            fadeOut(animationSpec = tween(0))
-        }) {
         // 带底部导航栏的路由：
         listOf(
             NavigationItem.Home,
@@ -111,11 +119,7 @@ fun NavigationController(navController: NavHostController) {
             }
         }
         composable(route = "OfficialPhoto") {
-            Box(
+            OfficialGalleryPage()
-                modifier = Modifier.padding(bottom = navigationBarHeight)
-            ) {
-                OfficialGalleryPage()
-            }
         }
         composable(route = "OfficialPhotographer") {
             OfficialPhotographer()
@@ -128,11 +132,7 @@ fun NavigationController(navController: NavHostController) {
             }
         }
         composable(route = "ModificationList") {
-            Box(
+            ModificationListScreen()
-                modifier = Modifier.padding(bottom = navigationBarHeight)
-            ) {
-                ModificationListScreen()
-            }
         }
         composable(route = "MyMessage") {
 
@@ -205,26 +205,31 @@ fun ScaffoldWithNavigationBar(
                     NavigationBarItem(
                         selected = currentRoute == it.route,
                         onClick = {
+                            // Check if the current route is not the same as the tab's route to avoid unnecessary navigation
                             if (currentRoute != it.route) {
-                                navController.navigate(it.route)
+                                navController.navigate(it.route) {
+                                    // Avoid creating a new layer on top of the navigation stack
+                                    launchSingleTop = true
+                                    // Attempt to pop up to the existing instance of the destination, if present
+                                    popUpTo(navController.graph.startDestinationId) {
+                                        saveState = true
+                                    }
+                                    // Restore state when navigating back to the composable
+                                    restoreState = true
+                                }
                             }
+                            // Additional logic for system UI color changes
                             when (it.route) {
                                 NavigationItem.Add.route -> {
-                                    systemUiController.setSystemBarsColor(
+                                    systemUiController.setSystemBarsColor(color = Color.Black)
-                                        color = Color.Black
-                                    )
                                 }
 
                                 NavigationItem.Message.route -> {
-                                    systemUiController.setSystemBarsColor(
+                                    systemUiController.setSystemBarsColor(color = Color.Black)
-                                        color = Color.Black
-                                    )
                                 }
 
                                 else -> {
-                                    systemUiController.setSystemBarsColor(
+                                    systemUiController.setSystemBarsColor(color = Color.Transparent)
-                                        color = Color.Transparent
-                                    )
                                 }
                             }
                         },

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

@@ -0,0 +1,31 @@
+package com.aiosman.riderpro
+
+import kotlin.math.min
+
+class MockDataContainer<T>(
+    val success: Boolean,
+    val data: T?
+) {
+
+}
+
+class MockListContainer<T>(
+    val total: Int,
+    val page: Int,
+    val pageSize: Int,
+    val list: List<T>
+) {
+
+}
+
+abstract class MockDataSource<T> {
+    var list = mutableListOf<T>()
+    suspend fun fetchData(page: Int, pageSize: Int): MockDataContainer<MockListContainer<T>> {
+        // over page return empty
+        if (page * pageSize > list.size) {
+            return MockDataContainer(false, MockListContainer(0, page, pageSize, emptyList()))
+        }
+        val backData = list.subList((page - 1) * pageSize, min(page * pageSize, list.size))
+        return MockDataContainer(true, MockListContainer(list.size, page, pageSize, backData))
+    }
+}

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

@@ -1,4 +1,5 @@
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -23,44 +24,45 @@ 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
+import com.aiosman.riderpro.BottomNavigationPlaceholder
 import com.aiosman.riderpro.LocalNavController
+import com.aiosman.riderpro.NoticeScreenHeader
 import com.aiosman.riderpro.R
+import com.aiosman.riderpro.StatusBarMask
+import com.aiosman.riderpro.StatusBarMaskLayout
 
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Preview
 @Composable
 fun ModificationListScreen() {
     val navController = LocalNavController.current
     val modifications = getModifications()
-    Column(modifier = Modifier.fillMaxSize().background(Color(0xFFF8F8F8))) {
+    StatusBarMaskLayout {
-        TopAppBar(
+        Column(
-            title = { Text("Modification List") },
+            modifier = Modifier
-            navigationIcon = {
+                .weight(1f)
-                IconButton(onClick = {
+                .padding(horizontal = 16.dp)
-                    navController.popBackStack()
+                .background(Color(0xFFF8F8F8))
-                }) {
+
-                    Icon(
+        ) {
-                        painter = painterResource(id = R.drawable.rider_pro_nav_back), // Replace with your back icon
+            NoticeScreenHeader("Modification List")
-                        contentDescription = "Back"
+            Spacer(modifier = Modifier.height(8.dp))
-                    )
+            LazyColumn(modifier = Modifier.padding(16.dp)) {
+                items(modifications.size) { index ->
+                    val modification = modifications[index]
+                    ModificationItem(name = modification.name, price = modification.price)
+                    Spacer(modifier = Modifier.height(8.dp))
+                }
+                item {
+                    BottomNavigationPlaceholder()
                 }
-            },
-            colors = TopAppBarDefaults.topAppBarColors(
-                containerColor = Color(0xFFF8F8F8),
-            )
-        )
-        Spacer(modifier = Modifier.height(8.dp))
-        LazyColumn(modifier = Modifier.padding(16.dp)) {
-            items(modifications.size) { index ->
-                val modification = modifications[index]
-                ModificationItem(name = modification.name, price = modification.price)
-                Spacer(modifier = Modifier.height(8.dp))
             }
         }
     }
 }
+
 data class Modification(val name: String, val price: String)
+
 fun getModifications(): List<Modification> {
     return listOf(
         Modification("Modification name", "$74.00"),
@@ -85,6 +87,7 @@ fun getModifications(): List<Modification> {
         Modification("Modification name", "$74.00"),
     )
 }
+
 @Composable
 fun ModificationItem(name: String, price: String) {
     Card(

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

@@ -36,16 +36,18 @@ import androidx.compose.ui.unit.sp
 @Preview
 @Composable
 fun OfficialGalleryPage() {
-    Column(
+    StatusBarMaskLayout {
-        modifier = Modifier
+        Column(
-            .fillMaxSize()
+            modifier = Modifier
-            .padding(top = 16.dp, start = 16.dp, end = 16.dp)
+                .fillMaxSize()
-    ) {
+                .padding(start = 16.dp, end = 16.dp)
-        OfficialGalleryPageHeader()
+        ) {
-//        CertificationSection()
+            OfficialGalleryPageHeader()
-        Spacer(modifier = Modifier.height(16.dp))
+            Spacer(modifier = Modifier.height(16.dp))
-        ImageGrid()
+            ImageGrid()
+        }
     }
+
 }
 
 @Composable
@@ -141,6 +143,9 @@ fun ImageGrid() {
         items(photographers.size) { index ->
             PhotographerCard(photographers[index].first, photographers[index].second)
         }
+        item{
+            BottomNavigationPlaceholder()
+        }
     }
 }
 

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

@@ -84,196 +84,208 @@ fun OfficialPhotographer() {
             alp
         }
     }
-    Scaffold { paddingValues ->
+    StatusBarMaskLayout(
-
+        maskBoxBackgroundColor = Color.Black,
-        Box(
+        darkIcons = false
-            modifier = Modifier
+    ) {
-                .background(Color.Black)
+        Column {
-                .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()
+                    .background(Color.Black)
-                    .height(64.dp)
+
-                    .background(Color.Black.copy(alpha = alpha))
+
-                    .padding(horizontal = 16.dp)
             ) {
-                Row(
+                LazyColumn(
                     modifier = Modifier.fillMaxSize(),
-                    verticalAlignment = androidx.compose.ui.Alignment.CenterVertically,
+                    state = lazyListState
                 ) {
-                    Image(
+                    item {
-                        painter = painterResource(id = R.drawable.rider_pro_nav_back),
+                        Box(
-                        colorFilter = androidx.compose.ui.graphics.ColorFilter.tint(Color.White),
+                            modifier = Modifier
-                        contentDescription = "",
+                                .height(400.dp)
-                        modifier = Modifier
+                                .fillMaxWidth()
-                            .size(32.dp)
+                        ) {
-                            .clip(CircleShape) // Clip the image to a circle
+                            Image(
-                    )
+                                painter = painterResource(id = R.drawable.default_moment_img),
-                    if (alpha == 1f) {
+                                contentDescription = "Logo",
-                        Spacer(modifier = Modifier.width(8.dp))
+                                contentScale = ContentScale.Crop,
+                                modifier = Modifier.fillMaxSize()
+                            )
+                            // dark alpha overlay
+                            Box(
+                                modifier = Modifier
+                                    .fillMaxSize()
+                                    .background(Color.Black.copy(alpha = alpha))
+                            )
+
+                            // 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)
+                                    )
+                                }
+                            }
+                            BottomNavigationPlaceholder()
+
+                        }
+                    }
+                }
+                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.default_avatar),
+                            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
-
                         )
-                        Spacer(modifier = Modifier.width(8.dp))
+                        if (alpha == 1f) {
-                        Text("Onyama Limba", color = Color.White)
+                            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)
+                        }
                     }
+
                 }
-
             }
-        }
 
+        }
     }
+
 }