94 lines
2.7 KiB
JavaScript
94 lines
2.7 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
Box,
|
|
Button,
|
|
TextField,
|
|
Stack,
|
|
Typography,
|
|
CircularProgress,
|
|
} from "@mui/material";
|
|
import { useFormik } from "formik";
|
|
import * as Yup from "yup";
|
|
|
|
const TicketSchema = Yup.object().shape({
|
|
title: Yup.string().required("عنوان تیکت الزامی است"),
|
|
description: Yup.string().required("متن تیکت الزامی است"),
|
|
});
|
|
|
|
const Ticket = () => {
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
const formik = useFormik({
|
|
initialValues: { title: "", description: "" },
|
|
validationSchema: TicketSchema,
|
|
onSubmit: async (values) => {
|
|
setIsSubmitting(true);
|
|
try {
|
|
// Simulate a submission
|
|
await new Promise((resolve) => setTimeout(resolve, 2000));
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
},
|
|
});
|
|
|
|
return (
|
|
<Box display="flex" justifyContent="center" mt={4}>
|
|
<Stack spacing={3} sx={{ width: { xs: "90%", md: "50%" } }}>
|
|
<Typography
|
|
variant="h5"
|
|
style={{ color: "gray" }}
|
|
textAlign="center"
|
|
gutterBottom
|
|
>
|
|
ارسال پیام
|
|
</Typography>
|
|
<form onSubmit={formik.handleSubmit}>
|
|
<Stack spacing={3}>
|
|
<TextField
|
|
id="title"
|
|
name="title"
|
|
label="عنوان تیکت"
|
|
fullWidth
|
|
value={formik.values.title}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.title && Boolean(formik.errors.title)}
|
|
helperText={formik.touched.title && formik.errors.title}
|
|
/>
|
|
<TextField
|
|
id="description"
|
|
name="description"
|
|
label="متن تیکت"
|
|
multiline
|
|
rows={4}
|
|
fullWidth
|
|
value={formik.values.description}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
error={
|
|
formik.touched.description && Boolean(formik.errors.description)
|
|
}
|
|
helperText={
|
|
formik.touched.description && formik.errors.description
|
|
}
|
|
/>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
sx={{ height: 48 }}
|
|
startIcon={isSubmitting && <CircularProgress size={24} />}
|
|
>
|
|
{isSubmitting ? "در حال ارسال..." : "ارسال"}
|
|
</Button>
|
|
</Stack>
|
|
</form>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Ticket;
|