modal design

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

@@ -2,11 +2,10 @@
 import React, { useState } from "react";
 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";
-import { Avatar } from "@mui/material";
+import Stack from "@mui/material/Stack";
+import ReviewModalContent from "./reviewModalContent/ReviewModalContent";
+import { Typography } from "@mui/material";
 const style = {
   position: "absolute" as "absolute",
   top: "50%",
@@ -18,7 +17,8 @@ const style = {
   border: "none",
   boxShadow: 24,
   borderRadius: 4,
-  p: 4,
+  paddingInline: 2,
+  paddingBlock: 4,
 };
 const labels: { [index: string]: string } = {
   0.5: "Useless",
@@ -34,8 +34,6 @@ const labels: { [index: string]: string } = {
 };
 
 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);
@@ -49,86 +47,20 @@ const HomePage = () => {
         aria-describedby="modal-modal-description"
       >
         <Box sx={style}>
-          <Box
-            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="caption"
-            display="block"
-            gutterBottom
-            sx={{ textAlign: "center" }}
-          >
-            April 17, 03:30PM
-          </Typography>
           <Typography
-            variant="body2"
-            id="modal-modal-description"
-            sx={{ mb: 2, mt: 2, textAlign: "center" }}
+            variant="h5"
+            sx={{ lineHeight: 1, marginBlockEnd: "20px" }}
           >
-            "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."
+            Reviews
           </Typography>
-          <Avatar
-            sx={{
-              width: 34,
-              height: 34,
-              marginInline: "auto",
-              cursor: "pointer",
-              background: "var(--primary_light)",
-              color: "var(--primary_Active_text)",
-              fontSize: "0.8rem",
-            }}
-            alt="Remy Sharp"
-            src="/static/images/avatar/1.jpg"
-          />
-          <Box
-            display={"flex"}
-            alignItems={"center"}
-            justifyContent={"center"}
-            gap={2}
-            marginBlockStart={1}
+          <Stack
+            spacing={2}
+            direction={"column"}
+            sx={{ maxHeight: "350px", overflow: "auto" }}
           >
-            <Box
-              flex={1}
-              textAlign={"center"}
-              display={"flex"}
-              flexDirection={"column"}
-            >
-              <Typography variant="body1" sx={{ m: 0, lineHeight: 1 }}>
-                Amit Roy
-              </Typography>
-              <Typography variant="caption" sx={{ m: 0 }}>
-                amit.roy@sentientgeeks.com
-              </Typography>
-            </Box>
-          </Box>
+            <ReviewModalContent />
+            <ReviewModalContent />
+          </Stack>
         </Box>
       </Modal>
     </Box>

src/app/(dashboard)/review/reviewModalContent/ReviewModalContent.tsx

@@ -0,0 +1,86 @@
+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 { Avatar } from "@mui/material";
+
+const ReviewModalContent = () => {
+  const [value, setValue] = React.useState<number | null>(2);
+  const [hover, setHover] = React.useState(-1);
+  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 }}>
+                Amit Roy
+              </Typography>
+              <Typography variant="caption" sx={{ m: 0 }}>
+                amit.roy@sentientgeeks.com
+              </Typography>
+            </Box>
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexDirection: "column",
+              }}
+            >
+              <Rating
+                name="hover-feedback"
+                value={value}
+                size="small"
+                precision={0.5}
+                onChange={(event, newValue) => {
+                  setValue(newValue);
+                }}
+                onChangeActive={(event, newHover) => {
+                  setHover(newHover);
+                }}
+                emptyIcon={
+                  <StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />
+                }
+              />
+              <Typography
+                variant="caption"
+                display="block"
+                gutterBottom
+                sx={{ textAlign: "center", m: 0 }}
+              >
+                April 17, 03:30PM
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+
+        <Typography variant="body2" id="modal-modal-description" sx={{ mt: 2 }}>
+          "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus
+          Dolorem."
+        </Typography>
+      </Box>
+    </>
+  );
+};
+
+export default ReviewModalContent;