86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
import React from "react";
|
|
import Box from "@mui/material/Box";
|
|
import Typography from "@mui/material/Typography";
|
|
import Rating from "@mui/material/Rating";
|
|
import StarIcon from "@mui/icons-material/Star";
|
|
import moment from "moment";
|
|
import { ReviewModalData } from "../../ReviewModal";
|
|
|
|
interface ReviewModalContentProps {
|
|
data: ReviewModalData;
|
|
}
|
|
|
|
const ReviewModalContent = ({ data }: ReviewModalContentProps) => {
|
|
return (
|
|
<>
|
|
<Box
|
|
border={"1px solid var(--primary_light)"}
|
|
borderRadius={2}
|
|
padding={2}
|
|
>
|
|
<Box display={"flex"} alignItems={"flex-start"} gap={2}>
|
|
<Box
|
|
flex={1}
|
|
textAlign={"start"}
|
|
display={"flex"}
|
|
flexDirection={"row"}
|
|
alignItems={"flex-start"}
|
|
justifyContent={"space-between"}
|
|
flexWrap={"wrap"}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "flex-start",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
<Typography variant="body1" sx={{ m: 0, lineHeight: 1 }}>
|
|
{data?.reviewerName}
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ m: 0 }}>
|
|
{data?.reviewerEmail}
|
|
</Typography>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
<Rating
|
|
name="hover-feedback"
|
|
value={data?.rating}
|
|
size="small"
|
|
precision={0.5}
|
|
readOnly
|
|
emptyIcon={
|
|
<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />
|
|
}
|
|
/>
|
|
{data?.date && (
|
|
<Typography
|
|
variant="caption"
|
|
display="block"
|
|
gutterBottom
|
|
sx={{ textAlign: "center", m: 0 }}
|
|
>
|
|
{moment(data?.date).format("MMMM D, hh:mmA")}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Typography variant="body2" id="modal-modal-description" sx={{ mt: 2 }}>
|
|
{data?.comment}
|
|
</Typography>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ReviewModalContent;
|