|
| 1 | +"use client" |
| 2 | + |
| 3 | +import { Box, Dialog, DialogContent, DialogTitle, Divider, IconButton, SvgIcon, Typography, alpha } from "@mui/material" |
| 4 | + |
| 5 | +import CloseSvg from "@/assets/svgs/bridge/close.svg" |
| 6 | + |
| 7 | +import GetSCRItem from "./GetSCRItem" |
| 8 | +import { GER_SCR_DATA } from "./data" |
| 9 | + |
| 10 | +// TODO: common modal |
| 11 | +const GetSCRDialog = props => { |
| 12 | + const { data, onClose, ...restProps } = props |
| 13 | + |
| 14 | + return ( |
| 15 | + <Dialog |
| 16 | + maxWidth={false} |
| 17 | + sx={[ |
| 18 | + { |
| 19 | + "& .MuiBackdrop-root": { |
| 20 | + backgroundColor: alpha("#101010", 0.8), |
| 21 | + }, |
| 22 | + "& .MuiDialog-paper": { |
| 23 | + width: "54.4rem", |
| 24 | + maxWidth: "100%", |
| 25 | + padding: "4rem 3.2rem", |
| 26 | + borderRadius: "2rem", |
| 27 | + }, |
| 28 | + }, |
| 29 | + theme => ({ |
| 30 | + [theme.breakpoints.down("sm")]: { |
| 31 | + "& .MuiDialog-paper": { |
| 32 | + margin: 0, |
| 33 | + borderRadius: 0, |
| 34 | + height: "calc(var(--vh, 1vh) * 100)", |
| 35 | + maxHeight: "unset", |
| 36 | + minWidth: "unset", |
| 37 | + width: "100%", |
| 38 | + padding: "1.6rem 2rem 2rem", |
| 39 | + }, |
| 40 | + }, |
| 41 | + }), |
| 42 | + ]} |
| 43 | + {...restProps} |
| 44 | + onClose={onClose} |
| 45 | + > |
| 46 | + <DialogTitle |
| 47 | + sx={{ |
| 48 | + position: "relative", |
| 49 | + height: ["3.2rem", "3.6rem"], |
| 50 | + fontSize: ["2rem", "2.4rem"], |
| 51 | + lineHeight: "3.6rem", |
| 52 | + fontWeight: 600, |
| 53 | + p: 0, |
| 54 | + mb: ["0.8rem", "2.4rem"], |
| 55 | + textAlign: "center", |
| 56 | + }} |
| 57 | + > |
| 58 | + <span>Get SCR</span> |
| 59 | + <IconButton |
| 60 | + sx={{ position: "absolute", right: "-0.8rem", top: ["-0.1rem", "-1.6rem"], "&:hover": { backgroundColor: "unset" } }} |
| 61 | + onClick={onClose} |
| 62 | + > |
| 63 | + <SvgIcon sx={{ fontSize: "1.8rem" }} component={CloseSvg} inheritViewBox></SvgIcon> |
| 64 | + </IconButton> |
| 65 | + </DialogTitle> |
| 66 | + |
| 67 | + <DialogContent |
| 68 | + sx={{ |
| 69 | + p: 0, |
| 70 | + minHeight: "50rem", |
| 71 | + "&::-webkit-scrollbar-thumb": { |
| 72 | + backgroundColor: "rgba(209, 205, 204, 0.6)", |
| 73 | + borderRadius: "8px", |
| 74 | + }, |
| 75 | + "&::-webkit-scrollbar": { |
| 76 | + width: "6px", |
| 77 | + }, |
| 78 | + // Firefox |
| 79 | + scrollbarWidth: "thin", |
| 80 | + scrollbarColor: "rgba(209, 205, 204, 0.6) transparent", |
| 81 | + }} |
| 82 | + > |
| 83 | + <Typography sx={{ fontSize: ["1.4rem", "1.6rem"], lineHeight: ["2rem", "2.4rem"], mb: "2.4rem" }}> |
| 84 | + Please verify the validity of these links and ensure you conduct your own research on SCR and the risks that may be involved. Under no |
| 85 | + circumstances will we be responsible for any losses you may incur. |
| 86 | + </Typography> |
| 87 | + {GER_SCR_DATA.map(({ title, data }, index) => ( |
| 88 | + <> |
| 89 | + {!!index && <Divider sx={{ my: ["2.4rem", "3.2rem"], borderColor: "#E9E9E9" }}></Divider>} |
| 90 | + <Box key={title}> |
| 91 | + <Typography sx={{ fontSize: ["1.6rem", "1.8rem"], lineHeight: "2.4rem", fontWeight: 600 }}>{title}</Typography> |
| 92 | + <Box> |
| 93 | + {data.map(item => ( |
| 94 | + <GetSCRItem key={item.name} {...item}></GetSCRItem> |
| 95 | + ))} |
| 96 | + </Box> |
| 97 | + </Box> |
| 98 | + </> |
| 99 | + ))} |
| 100 | + </DialogContent> |
| 101 | + </Dialog> |
| 102 | + ) |
| 103 | +} |
| 104 | + |
| 105 | +export default GetSCRDialog |
0 commit comments