add otp box

app/src/main/java/com/example/netwrok_datastore/ui/screen/registration/RegistrationScreen.kt

@@ -3,10 +3,21 @@ package com.example.netwrok_datastore.ui.screen.registration
 import android.window.SplashScreen
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.OutlinedTextField
@@ -16,12 +27,19 @@ import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.lifecycle.viewmodel.viewModelFactory
 import com.example.netwrok_datastore.R
@@ -76,4 +94,56 @@ fun RegistrationScreen(viewModel: RegistrationViewModel, onNavigationToProfile:
             }
         }
     }
+}
+@Preview
+@Composable
+fun testOtpTextField(){
+    val text =  remember { mutableStateOf("")}
+OtpTextField(text.value, 4){
+    text.value = it
+}
+}
+
+@Composable
+fun OtpTextField(
+value: String,
+length: Int,
+modifier: Modifier = Modifier,
+boxWidth: Dp = 50.dp,
+boxHeight: Dp = 100.dp,
+keyboardOptions: KeyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
+keyboardActions: KeyboardActions = KeyboardActions(),
+onValueChanged: (String) -> Unit
+){
+    BasicTextField(
+        value = value,
+        onValueChange = {
+            if(it.length <= length){
+                onValueChanged(it)
+            }
+        },
+        modifier = modifier,
+        keyboardActions = keyboardActions,
+        keyboardOptions = keyboardOptions,
+        decorationBox = {
+            val spaceBoxBetween = 12.dp
+            Row(modifier = Modifier
+                .size(width = (boxWidth + spaceBoxBetween) * length, height = boxHeight),
+                horizontalArrangement = Arrangement.SpaceEvenly
+            ) {
+                repeat(length){
+                    Box(
+                        modifier = Modifier
+                            .width(46.dp)
+                            .fillMaxHeight()
+                            .border(width = 1.dp, color = Color.Blue),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Text(text = value.getOrNull(it)?.toString() ?: "")
+                    }
+                }
+
+            }
+        }
+    )
 }