resolve conflicts

This commit is contained in:
2023-12-13 15:52:41 +03:30
parent b38eaef4f1
commit b3e31516a7
4 changed files with 540 additions and 464 deletions

View File

@@ -0,0 +1,232 @@
import {Box, Button, Drawer, FormHelperText, TextField, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
import AccessibleIcon from '@mui/icons-material/Accessible';
import {useState} from "react";
const plate_words = [
{
id: 1,
value: "الف",
name: "الف"
},
{
id: 2,
value: "ب",
name: "ب"
},
{
id: 3,
value: "پ",
name: "پ"
},
{
id: 4,
value: "ت",
name: "ت"
},
{
id: 5,
value: "ث",
name: "ث"
},
{
id: 6,
value: "ج",
name: "ج"
},
{
id: 7,
value: "د",
name: "د"
},
{
id: 8,
value: "ز",
name: "ز"
},
{
id: 9,
value: "س",
name: "س"
},
{
id: 10,
value: "ش",
name: "ش"
},
{
id: 11,
value: "ص",
name: "ص"
},
{
id: 12,
value: "ط",
name: "ط"
},
{
id: 13,
value: "ع",
name: "ع"
},
{
id: 14,
value: "ف",
name: "ف"
},
{
id: 15,
value: "ق",
name: "ق"
},
{
id: 16,
value: "ک",
name: "گ"
},
{
id: 17,
value: "ل",
name: "ل"
},
{
id: 18,
value: "م",
name: "م"
},
{
id: 19,
value: "ن",
name: "ن"
},
{
id: 20,
value: "و",
name: "و"
},
{
id: 21,
value: "ه",
name: "ه"
},
{
id: 22,
value: "ی",
name: "ی"
},
{
id: 23,
value: "*",
name: <AccessibleIcon/>
},
]
const PlateNumber = ({formik}) => {
const t = useTranslations();
const [plateDrawer, setPlateDrawer] = useState(false);
const [selectedWordName, setSelectedWordName] = useState("الف");
const [selectedWordValue, setSelectedWordValue] = useState("");
return (
<>
<Box sx={{
display: "flex",
width: "fit-content",
flexDirection: "row",
alignItems: "end",
justifyContent: "end",
gap: 0.75
}}>
<Box sx={{display: "flex", flexDirection: "column", textAlign: "center"}}>
<Typography variant="caption" sx={{fontWeight: 500}}>
ایران
</Typography>
<TextField
sx={{width: "50px"}}
name="plate_part4"
variant="outlined"
size="small"
type='number'
onChange={formik.handleChange}
onBlur={formik.handleBlur("plate_part4")}
/>
</Box>
<Box>
<TextField
sx={{width: "70px"}}
name="plate_part3"
variant="outlined"
size="small"
type='number'
onChange={formik.handleChange}
onBlur={formik.handleBlur("plate_part3")}
/>
</Box>
<Box>
{/*<TextField*/}
{/* sx={{width: "50px"}}*/}
{/* name="plate_part2"*/}
{/* variant="outlined"*/}
{/* type={'number'}*/}
{/* size="small"*/}
{/* onChange={formik.handleChange}*/}
{/* onBlur={formik.handleBlur("plate_part1")}*/}
{/*/>*/}
<Button onClick={() => setPlateDrawer(true)}
sx={{
borderColor: "divider",
fontSize: "16px"
}}
variant="outlined"
data-selected-word={selectedWordValue}
>{selectedWordName}</Button>
<Drawer
anchor={"bottom"}
open={plateDrawer}
onClose={() => setPlateDrawer(false)}
>
<Box sx={{
display: "flex",
flexWrap: "wrap",
mx: "auto",
my: 2,
gap: 2,
width: "60%",
justifyContent: "center"
}}>
{plate_words.map((item) => (
<Button
key={item.id}
onClick={() => {
setSelectedWordName(item.name);
setSelectedWordValue(item.value);
setPlateDrawer(false);
}}
sx={{
width: "fit-content"
}}
variant="contained"
>
{item.name}
</Button>
))}
</Box>
</Drawer>
</Box>
<Box>
<TextField
sx={{width: "50px"}}
name="plate_part1"
variant="outlined"
type='number'
size="small"
onChange={formik.handleChange}
onBlur={formik.handleBlur("plate_part1")}
/>
</Box>
</Box>
<FormHelperText>{t("error_message_plate_number")}</FormHelperText>
</>
)
}
export default PlateNumber