feat: Added SearchField reusable component and used in HomeTopBar

This commit is contained in:
2026-02-17 20:41:28 +01:00
parent be9f37955b
commit f97cc54e2a
3 changed files with 73 additions and 17 deletions

View File

@@ -18,6 +18,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import hu.bbara.purefin.common.ui.components.PurefinIconButton
import hu.bbara.purefin.common.ui.components.SearchField
@Composable
fun HomeTopBar(
@@ -40,22 +41,29 @@ fun HomeTopBar(
.padding(horizontal = 16.dp, vertical = 16.dp)
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterHorizontally),
) {
Row(verticalAlignment = Alignment.CenterVertically) {
PurefinIconButton(
icon = Icons.Outlined.Menu,
contentDescription = "Menu",
onClick = onMenuClick
)
}
Row(verticalAlignment = Alignment.CenterVertically) {
PurefinIconButton(
icon = if (isOfflineMode) Icons.Outlined.CloudOff else Icons.Outlined.Cloud,
contentDescription = if (isOfflineMode) "Switch to Online" else "Switch to Offline",
onClick = onToggleOfflineMode
)
}
PurefinIconButton(
icon = Icons.Outlined.Menu,
contentDescription = "Menu",
onClick = onMenuClick,
)
SearchField(
value = "",
onValueChange = {},
placeholder = "Search",
backgroundColor = scheme.surface,
textColor = scheme.onSurface,
cursorColor = scheme.secondary,
modifier = Modifier.weight(1.0f, true),
)
PurefinIconButton(
icon = if (isOfflineMode) Icons.Outlined.CloudOff else Icons.Outlined.Cloud,
contentDescription = if (isOfflineMode) "Switch to Online" else "Switch to Offline",
onClick = onToggleOfflineMode
)
}
}
}

View File

@@ -0,0 +1,48 @@
package hu.bbara.purefin.common.ui.components
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Search
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
@Composable
fun SearchField(
value: String,
onValueChange: (String) -> Unit,
placeholder: String,
backgroundColor: Color,
textColor: Color,
cursorColor: Color,
modifier: Modifier = Modifier,
) {
val scheme = MaterialTheme.colorScheme
TextField(
value = value,
onValueChange = onValueChange,
modifier = modifier
.fillMaxWidth()
.clip(RoundedCornerShape(24.dp)),
placeholder = { Text(placeholder, color = scheme.onSurfaceVariant) },
leadingIcon =
{ Icon(imageVector = Icons.Outlined.Search, contentDescription = null, tint = scheme.onSurfaceVariant) },
colors = TextFieldDefaults.colors(
focusedContainerColor = backgroundColor,
unfocusedContainerColor = backgroundColor,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
cursorColor = cursorColor,
focusedTextColor = textColor,
unfocusedTextColor = textColor,
))
}

View File

@@ -49,5 +49,5 @@ val DarkOnTertiaryContainer = Color(ColorUtils.HSLToColor(floatArrayOf(30f, 0.65
val DarkBackground = Color(ColorUtils.HSLToColor(floatArrayOf(270f, 0.18f, 0.08f)))
val DarkOnBackground = Color(ColorUtils.HSLToColor(floatArrayOf(270f, 0.10f, 0.92f)))
val DarkSurface = Color(ColorUtils.HSLToColor(floatArrayOf(270f, 0.18f, 0.08f)))
val DarkOnSurface = Color(ColorUtils.HSLToColor(floatArrayOf(270f, 0.10f, 0.92f)))
val DarkSurface = Color(ColorUtils.HSLToColor(floatArrayOf(270f, 0.18f, 0.14f)))
val DarkOnSurface = Color(ColorUtils.HSLToColor(floatArrayOf(270f, 0.10f, 0.86f)))