Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 1x 110x | import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Paper,
Stack,
Typography,
} from "@mui/material";
import React from "react";
import DefaultImage from "@/assets/default_image.png";
const SearchProfile = ({ isDialog, setDialog, data }) => {
return (
<Dialog
open={isDialog}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
fullWidth
>
<DialogTitle id="alert-dialog-title">Student Profile</DialogTitle>
<DialogContent dividers>
<Stack spacing={5}>
<Box sx={{ display: "flex", flexDirection: "row", gap: 3.5 }}>
<img style={{ width: "150px" }} src={data?.photo || DefaultImage} alt="std img" />
<Stack spacing={0.5}>
<Typography variant="body1" gutterBottom>
Name:
{` ${data?.first_name} ${data?.middle_name} ${data?.last_name}`}
</Typography>
<Typography variant="body1" gutterBottom>
Status: {data?.status}
</Typography>
<Typography variant="body1" gutterBottom>
Email: {data?.email}
</Typography>
</Stack>
</Box>
<Box>
<Typography variant="body1" gutterBottom>
Subjects {`(${data?.subjects?.length})`}
</Typography>
<Stack spacing={1}>
{data?.subjects?.map((item, index) => (
<Paper key={index} sx={{ p: 1.5 }} variant="outlined">
{item.title}
</Paper>
))}
</Stack>
</Box>
</Stack>
</DialogContent>
<DialogActions sx={{ display: "flex", justifyContent: "space-between" }}>
<Box></Box>
<Button
sx={{ width: "150px" }}
variant="contained"
color="primary"
onClick={() => {
setDialog(false);
}}
>
OK
</Button>
</DialogActions>
</Dialog>
);
};
export default SearchProfile;
|