@Composable
private fun ThemePicker(
onOnColorPicked: (Color) -> Unit,
onOffColorPicked: (Color) -> Unit,
onShapePicked: (LedShape) -> Unit
) {
val colors = listOf(
Color.Black,
Color.DarkGray,
Color.Gray,
Color.LightGray,
Color.White,
Color.Red,
Color.Green,
Color.Blue,
Color.Yellow,
Color.Cyan,
Color.Magenta,
)
// TODO: Place the color pickers in a better layout like `LazyVerticalGrid` later
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.padding(top = 16.dp)
) {
Text(
"Pick the LED color in ON state",
style = TextStyle(
fontWeight = FontWeight.Bold,
color = Color.DarkGray,
fontSize = 18.sp
)
)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 16.dp),
horizontalArrangement = Arrangement.Center,
) {
repeat(colors.size) {
Box(
modifier = Modifier
.width(30.dp)
.height(40.dp)
.border(width = 1.dp, color = Color.Black)
.background(color = colors[it])
.clickable {
onOnColorPicked.invoke(colors[it])
}
)
}
}
Text(
"Pick the LED color in OFF state",
style = TextStyle(
fontWeight = FontWeight.Bold,
color = Color.DarkGray,
fontSize = 18.sp
)
)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 16.dp),
horizontalArrangement = Arrangement.Center,
) {
repeat(colors.size) {
Box(
modifier = Modifier
.width(30.dp)
.height(40.dp)
.border(width = 1.dp, color = Color.Black)
.background(color = colors[it])
.clickable {
onOffColorPicked.invoke(colors[it])
}
)
}
}
Text(
"Pick an LED shape",
style = TextStyle(
fontWeight = FontWeight.Bold,
color = Color.DarkGray,
fontSize = 18.sp
)
)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 16.dp),
horizontalArrangement = Arrangement.Center,
) {
Box(
modifier = Modifier
.padding(end = 16.dp)
.width(40.dp)
.height(40.dp)
.border(
shape = RoundedCornerShape(size = 40.dp),
width = 2.dp,
color = Color.Black
)
.clickable {
onShapePicked.invoke(LedShape.Round)
}
)
Box(
modifier = Modifier
.width(40.dp)
.height(40.dp)
.border(
width = 2.dp,
color = Color.Black
)
.clickable {
onShapePicked.invoke(LedShape.Rectangle)
}
)
}
}
}