Home Screen Updated

composeApp/src/commonMain/kotlin/org/onedroid/greedycoder/app/presentation/home/HomeAction.kt

@@ -0,0 +1,5 @@
+package org.onedroid.greedycoder.app.presentation.home
+
+sealed interface HomeAction {
+    data class OnTabSelected(val index: Int) : HomeAction
+}

composeApp/src/commonMain/kotlin/org/onedroid/greedycoder/app/presentation/home/HomeScreen.kt

@@ -0,0 +1,98 @@
+package org.onedroid.greedycoder.app.presentation.home
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import org.koin.compose.viewmodel.koinViewModel
+import org.onedroid.greedycoder.app.presentation.home.components.ContestHorizontalPager
+import org.onedroid.greedycoder.app.presentation.home.components.UpcomingContestCardMostRecent
+import org.onedroid.greedycoder.core.components.CustomTopAppBar
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun HomeScreenRoot(
+    viewModel: HomeViewModel = koinViewModel(),
+    innerPadding: PaddingValues,
+    onSettingClick: () -> Unit = {},
+) {
+    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
+    val state by viewModel.state.collectAsStateWithLifecycle()
+    val keyboardController = LocalSoftwareKeyboardController.current
+
+    Surface(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(innerPadding)
+            .background(
+                brush = Brush.verticalGradient(
+                    listOf(
+                        MaterialTheme.colorScheme.background,
+                        MaterialTheme.colorScheme.background
+                    )
+                )
+            )
+    ) {
+        Scaffold(
+            modifier = Modifier
+                .fillMaxSize()
+                .nestedScroll(scrollBehavior.nestedScrollConnection),
+            topBar = {
+                CustomTopAppBar(
+                    title = "Home",
+                    onSettingClick = {
+                        onSettingClick()
+                    },
+                    onSearchClick = {
+
+                    },
+                    scrollBehavior = scrollBehavior
+                )
+            }
+        ) { innerPadding ->
+            HomeScreen(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(innerPadding)
+                    .verticalScroll(rememberScrollState()),
+                state = state,
+                onAction = { action ->
+                    viewModel.onAction(action)
+                }
+            )
+        }
+    }
+}
+
+@Composable
+private fun HomeScreen(
+    modifier: Modifier = Modifier,
+    state: HomeState,
+    onAction: (HomeAction) -> Unit = {}
+) {
+    Column(modifier = modifier) {
+        UpcomingContestCardMostRecent()
+        ContestHorizontalPager(
+            onAction = {
+                onAction(it)
+            },
+            state = state
+        )
+    }
+}

composeApp/src/commonMain/kotlin/org/onedroid/greedycoder/app/presentation/home/HomeState.kt

@@ -0,0 +1,5 @@
+package org.onedroid.greedycoder.app.presentation.home
+
+data class HomeState(
+    val selectedTabIndex: Int = 1
+)

composeApp/src/commonMain/kotlin/org/onedroid/greedycoder/app/presentation/home/HomeViewModel.kt

@@ -0,0 +1,21 @@
+package org.onedroid.greedycoder.app.presentation.home
+
+import androidx.lifecycle.ViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+
+class HomeViewModel : ViewModel() {
+    private val _state = MutableStateFlow(HomeState())
+    val state = _state.asStateFlow()
+
+    fun onAction(action: HomeAction) {
+        when (action) {
+            is HomeAction.OnTabSelected -> {
+                _state.update {
+                    it.copy(selectedTabIndex = action.index)
+                }
+            }
+        }
+    }
+}

composeApp/src/commonMain/kotlin/org/onedroid/greedycoder/app/presentation/home/components/ContestHorizontalPager.kt

@@ -0,0 +1,129 @@
+package org.onedroid.greedycoder.app.presentation.home.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Tab
+import androidx.compose.material3.TabRow
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+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.unit.dp
+import org.onedroid.greedycoder.app.presentation.home.HomeAction
+import org.onedroid.greedycoder.app.presentation.home.HomeState
+import org.onedroid.greedycoder.core.theme.extraSmall
+import org.onedroid.greedycoder.core.theme.small
+
+@Composable
+fun ContestHorizontalPager(
+    onAction: (HomeAction) -> Unit,
+    state: HomeState
+) {
+    val pagerState = rememberPagerState { 2 }
+    LaunchedEffect(state.selectedTabIndex) {
+        pagerState.animateScrollToPage(state.selectedTabIndex)
+    }
+    LaunchedEffect(pagerState.currentPage) {
+        onAction(HomeAction.OnTabSelected(pagerState.currentPage))
+    }
+    Column(
+        modifier = Modifier.fillMaxWidth().padding(16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        TabRow(
+            modifier = Modifier
+                .padding(horizontal = extraSmall)
+                .clip(RoundedCornerShape(8.dp))
+                .fillMaxWidth(),
+            selectedTabIndex = state.selectedTabIndex,
+            containerColor = MaterialTheme.colorScheme.surfaceContainer,
+            divider = {},
+            indicator = {}
+        ) {
+            Tab(
+                modifier = Modifier.weight(1f),
+                selected = state.selectedTabIndex == 0,
+                selectedContentColor = MaterialTheme.colorScheme.onSecondaryContainer.copy(alpha = 0.8f),
+                unselectedContentColor = MaterialTheme.colorScheme.onSecondaryContainer.copy(alpha = 0.8f),
+                onClick = {
+                    onAction(HomeAction.OnTabSelected(0))
+                }
+            ) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(
+                            color = if (state.selectedTabIndex == 0) MaterialTheme.colorScheme.secondaryContainer else MaterialTheme.colorScheme.surfaceContainer,
+                            shape = RoundedCornerShape(8.dp)
+                        )
+                ) {
+                    Text(
+                        modifier = Modifier
+                            .align(Alignment.Center)
+                            .padding(vertical = 12.dp),
+                        text = "Upcoming",
+                        style = MaterialTheme.typography.labelLarge
+                    )
+                }
+            }
+            Tab(
+                modifier = Modifier
+                    .weight(1f),
+                selected = state.selectedTabIndex == 1,
+                selectedContentColor = MaterialTheme.colorScheme.onSecondaryContainer.copy(alpha = 0.8f),
+                unselectedContentColor = MaterialTheme.colorScheme.onSecondaryContainer.copy(alpha = 0.8f),
+                onClick = {
+                    onAction(HomeAction.OnTabSelected(1))
+                }
+            ) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(
+                            color = if (state.selectedTabIndex == 1) MaterialTheme.colorScheme.secondaryContainer else MaterialTheme.colorScheme.surfaceContainer,
+                            shape = RoundedCornerShape(8.dp)
+                        )
+                ) {
+                    Text(
+                        modifier = Modifier
+                            .align(Alignment.Center)
+                            .padding(vertical = 12.dp),
+                        text = "Completed",
+                        style = MaterialTheme.typography.labelLarge
+                    )
+                }
+            }
+        }
+
+        HorizontalPager(
+            modifier = Modifier.fillMaxWidth(),
+            state = pagerState
+        ) { pageIndex ->
+            Box(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                when (pageIndex) {
+                    0 -> {
+                        Text(text = "Upcoming")
+                    }
+                    1 -> {
+                        Text(text = "Completed")
+                    }
+                }
+            }
+        }
+    }
+}