modal page home set state

app/component/element/AutoCompleteSelect.js

@@ -0,0 +1,50 @@
+import BottomSelect from "@/components/icons/BottomSelect";
+import { Autocomplete, TextField } from "@mui/material";
+import { styleTextSelectRight } from "@/mui";
+
+function AutoCompleteSelect({ list, updateData, label }) {
+    return (
+        <Autocomplete
+            disablePortal
+            options={list}
+            className="!rounded-lg !w-[344px]"
+            onChange={(event) => updateData && updateData(event)}
+            sx={{
+                ...styleTextSelectRight,
+                // Hide Icon Number
+                '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
+                    display: 'none'
+                },
+                '& input[type=number]': {
+                    MozAppearance: 'textfield'
+                },
+                '& .MuiInputBase-root': {
+                    borderRadius: 2,
+                    padding: '5px 16px !important'
+                }
+            }}
+            renderInput={(params) =>
+                <TextField
+                    fullWidth
+                    {...params}
+                    InputProps={{
+                        ...params.InputProps,
+                        endAdornment: (
+                            <div
+                                className="absolute left-4"
+                            >
+                                <BottomSelect />
+                            </div>
+                        )
+                    }}
+                    placeholder={label}
+                    sx={{
+                        borderRadius: '8px',
+                    }}
+                />
+            }
+        />
+    )
+}
+
+export default AutoCompleteSelect

app/component/element/Field.js

@@ -1,4 +1,5 @@
 import { TextField } from "@mui/material"
+import { styleTextSelectRight } from "@/mui"
 
 function Field({ title, type, isPlaceHolder }) {
     return (
@@ -7,22 +8,7 @@ function Field({ title, type, isPlaceHolder }) {
             type={type || 'text'}
             className="!w-full !mx-auto !bg-[#FFF]"
             sx={{
-                '& .mui-fxnuf-MuiFormLabel-root-MuiInputLabel-root': {
-                    right: '30px'
-                },
-                '& .mui-18r6uqa-MuiFormLabel-root-MuiInputLabel-root': {
-                    right: '0',
-                    left: 'auto',
-                    background: '#FFF',
-                    padding: '0 10px'
-                },
-                '& .mui-14lo706': {
-                    display: 'none'
-                },
-                '& .MuiFormLabel-root': {
-                    top: '-4px !important'
-                },
-
+                ...styleTextSelectRight,
                 // Hide Icon Number
                 '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
                     display: 'none'