modal design review

src/app/(dashboard)/review/page.tsx

@@ -4,7 +4,8 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import Modal from "@mui/material/Modal";
-
+import Rating from '@mui/material/Rating';
+import StarIcon from '@mui/icons-material/Star';
 const style = {
   position: "absolute" as "absolute",
   top: "50%",
@@ -16,8 +17,23 @@ const style = {
   boxShadow: 24,
   p: 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+',
+};
+
 
 const HomePage = () => {
+  const [value, setValue] = React.useState<number | null>(2);
+  const [hover, setHover] = React.useState(-1);
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -30,12 +46,44 @@ const HomePage = () => {
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
-        <Box sx={style}>
+        <Box sx={style} >
-          <Typography id="modal-modal-title" variant="h6" component="h2">
+          <Box
-            Text in a modal
+            sx={{
+              width: "100%",
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              marginBlockEnd: 2
+            }}
+          >
+            <Rating
+              name="hover-feedback"
+              value={value}
+              size="large"
+              precision={0.5}
+              onChange={(event, newValue) => {
+                setValue(newValue);
+              }}
+              onChangeActive={(event, newHover) => {
+                setHover(newHover);
+              }}
+              emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
+            />
+            {/* {value !== null && (
+              <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
+            )} */}
+          </Box>
+          <Typography variant="h6" sx={{ textAlign: "center", m: 0 }}>
+            Amit Roy
           </Typography>
-          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+          <Typography variant="subtitle2" gutterBottom sx={{ textAlign: "center" }}>
-            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            amit.roy@sentientgeeks.com
+          </Typography>
+          <Typography variant="body2" id="modal-modal-description" sx={{ mb: 2, mt: 2, textAlign: "center" }}>
+            "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus laborum molestiae vitae ipsum sit officia accusantium atque cupiditate modi odio, earum harum, iste a tenetur quam dolor, totam nisi? Dolorem."
+          </Typography>
+          <Typography variant="caption" display="block" gutterBottom sx={{ textAlign: "center" }}>
+            April 17, 03:30PM
           </Typography>
         </Box>
       </Modal>