Amit/mui-demo-project
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

modal design

Browse Source
This commit is contained in:
Amit Roy 2024-08-07 13:38:54 +05:30
parent bedc3853d6
commit 69f50ff3c7
2 changed files with 101 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/app/(dashboard)/review/page.tsx
View File

@ -2,11 +2,10 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal"; import Modal from "@mui/material/Modal";
import Rating from "@mui/material/Rating"; import Stack from "@mui/material/Stack";
import StarIcon from "@mui/icons-material/Star"; import ReviewModalContent from "./reviewModalContent/ReviewModalContent";
import { Avatar } from "@mui/material"; import { Typography } from "@mui/material";
const style = { const style = {
position: "absolute" as "absolute", position: "absolute" as "absolute",
top: "50%", top: "50%",
@ -18,7 +17,8 @@ const style = {
border: "none", border: "none",
boxShadow: 24, boxShadow: 24,
borderRadius: 4, borderRadius: 4,
p: 4, paddingInline: 2,
paddingBlock: 4,
}; };
const labels: { [index: string]: string } = { const labels: { [index: string]: string } = {
0.5: "Useless", 0.5: "Useless",
@ -34,8 +34,6 @@ const labels: { [index: string]: string } = {
}; };
const HomePage = () => { const HomePage = () => {
const [value, setValue] = React.useState<number | null>(2);
const [hover, setHover] = React.useState(-1);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true); const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false); const handleClose = () => setOpen(false);
@ -49,86 +47,20 @@ const HomePage = () => {
aria-describedby="modal-modal-description" aria-describedby="modal-modal-description"
> >
<Box sx={style}> <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 <Typography
variant="caption" variant="h5"
display="block" sx={{ lineHeight: 1, marginBlockEnd: "20px" }}
gutterBottom
sx={{ textAlign: "center" }}
> >
April 17, 03:30PM Reviews
</Typography> </Typography>
<Typography <Stack
variant="body2" spacing={2}
id="modal-modal-description" direction={"column"}
sx={{ mb: 2, mt: 2, textAlign: "center" }} sx={{ maxHeight: "350px", overflow: "auto" }}
> >
"Lorem ipsum dolor, sit amet consectetur adipisicing elit. <ReviewModalContent />
Temporibus laborum molestiae vitae ipsum sit officia accusantium <ReviewModalContent />
atque cupiditate modi odio, earum harum, iste a tenetur quam dolor, </Stack>
totam nisi? Dolorem."
</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}
>
<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>
</Box> </Box>
</Modal> </Modal>
</Box> </Box>

86
src/app/(dashboard)/review/reviewModalContent/ReviewModalContent.tsx Normal file
View File

@ -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;