51 lines
2.1 KiB
JavaScript
51 lines
2.1 KiB
JavaScript
import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip, Typography, Card, CardContent } from "@mui/material";
|
|
import { useState } from "react";
|
|
import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
|
|
const DescriptionForm = ({ description, title, icon: IconComponent = RemoveRedEyeIcon }) => {
|
|
const [openOfficerDescriptionDialog, setOpenOfficerDescriptionDialog] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<Tooltip title={title}>
|
|
<IconButton color="primary" onClick={() => setOpenOfficerDescriptionDialog(true)}>
|
|
<IconComponent />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Dialog
|
|
open={openOfficerDescriptionDialog}
|
|
onClose={() => setOpenOfficerDescriptionDialog(false)}
|
|
PaperProps={{
|
|
sx: {
|
|
transition: "all .3s",
|
|
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
|
borderRadius: 2,
|
|
padding: 1,
|
|
},
|
|
}}
|
|
maxWidth="sm"
|
|
fullWidth
|
|
dir="rtl"
|
|
>
|
|
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
|
|
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
|
|
{title}
|
|
</Typography>
|
|
<IconButton onClick={() => setOpenOfficerDescriptionDialog(false)} size="small">
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<Card elevation={0}>
|
|
<CardContent>
|
|
<Typography variant="body2">{description || "هیچ توضیحی موجود نیست"} </Typography>
|
|
</CardContent>
|
|
</Card>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
export default DescriptionForm;
|