ThousandSeparator.kt

@Composable
fun ThousandSeperator(
    modifier: Modifier = Modifier,
    title: String = "",
    values: List<String>,
    selectedIndex: Int = 0,
    onValueSelected: (Int) -> Unit
) {
    Column(
        modifier = modifier
            .padding(16.dp)
            .background(Color(0xffFEF7FF))
    ) {
        Text(
            text = title,
            fontSize = 14.sp,
            color = Color(0xff1B1B1C)
        )
        Spacer(modifier = Modifier.height(8.dp))
        Row(
            modifier = Modifier
                .background(
                    Color(0xff8138FF).copy(alpha = 0.08f),
                    shape = RoundedCornerShape(16.dp)
                )
                .padding(4.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {

            values.forEachIndexed { index, value ->
                val isSelected = index == selectedIndex

                val backgroundColor by animateColorAsState(
                    targetValue = if (isSelected) Color(0Xffffffff) else Color.Transparent,
                    animationSpec = tween(30),
                    label = "colorAnim"
                )
                val shape by animateDpAsState(
                    targetValue = if (isSelected) 12.dp else 0.dp,
                    animationSpec = tween(30),
                    label = "shapeAnim"
                )

                val textColor by animateColorAsState(
                    targetValue = if (isSelected) Color(0xff1B1B1C) else Color(0xff24005A),
                    label = "textColorAnim"
                )

                Box(modifier = Modifier
                    .weight(1f)
                    .clip(RoundedCornerShape(shape))
                    .background(backgroundColor)
                    .clickable { onValueSelected(index) }
                    .padding(8.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = value,
                        color = textColor,
                        fontWeight = FontWeight.W600
                    )
                }

            }

        }
    }

}

@Composable
fun HorizontalRowBar(modifier: Modifier = Modifier) {
    var selected by remember { mutableStateOf(0) }
    val options = listOf("1.000", "1,000", "1 000")
    ThousandSeperator(
        modifier = modifier,
        values = options,
        title = "Thousands separator",
        selectedIndex = selected,
        onValueSelected = { selected = it }
    )
}