89 lines
1.9 KiB
TypeScript
89 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import Box from "@mui/material/Box";
|
|
import Modal from "@mui/material/Modal";
|
|
import Stack from "@mui/material/Stack";
|
|
import ReviewModalContent from "./components/reviewModalContent/ReviewModalContent";
|
|
import { Typography } from "@mui/material";
|
|
|
|
const style = {
|
|
position: "absolute" as "absolute",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: "90%",
|
|
maxWidth: 400,
|
|
bgcolor: "background.paper",
|
|
border: "none",
|
|
boxShadow: 24,
|
|
borderRadius: 4,
|
|
paddingInline: 2,
|
|
paddingBlock: 4,
|
|
};
|
|
|
|
const labels: { [index: string]: string } = {
|
|
0.5: "Useless",
|
|
1: "Useless+",
|
|
1.5: "Poor",
|
|
2: "Poor+",
|
|
2.5: "Ok",
|
|
3: "Ok+",
|
|
3.5: "Good",
|
|
4: "Good+",
|
|
4.5: "Excellent",
|
|
5: "Excellent+",
|
|
};
|
|
|
|
interface ReviewModalProps {
|
|
open: boolean;
|
|
handleClose: () => void;
|
|
reviewModalData: ReviewModalData[];
|
|
}
|
|
|
|
export interface ReviewModalData {
|
|
reviewerName: string;
|
|
reviewerEmail: string;
|
|
date: string;
|
|
comment: string;
|
|
rating: number;
|
|
}
|
|
|
|
const ReviewModal = ({
|
|
open,
|
|
handleClose,
|
|
reviewModalData,
|
|
}: ReviewModalProps) => {
|
|
console.log("reviewModalData", reviewModalData);
|
|
|
|
return (
|
|
<Box>
|
|
<Modal
|
|
open={open}
|
|
onClose={handleClose}
|
|
aria-labelledby="modal-modal-title"
|
|
aria-describedby="modal-modal-description"
|
|
>
|
|
<Box sx={style}>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{ lineHeight: 1, marginBlockEnd: "20px" }}
|
|
>
|
|
Reviews
|
|
</Typography>
|
|
<Stack
|
|
spacing={2}
|
|
direction={"column"}
|
|
sx={{ maxHeight: "370px", overflow: "auto" }}
|
|
>
|
|
{reviewModalData.map((review: ReviewModalData, index: number) => (
|
|
<ReviewModalContent key={index} data={review} />
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
</Modal>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ReviewModal;
|