You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

84 lines
2.1 KiB

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Modal from "@material-ui/core/Modal";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
},
mobile: {
h2: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 22,
},
};
function rand() {
return Math.round(Math.random() * 20) - 10;
}
function getModalStyle() {
return {
top: `${50}%`,
left: `${50}%`,
transform: `translate(-${50}%, -${50}%)`,
padding: "10px",
};
}
const useStyles = makeStyles((theme) => ({
paper: {
position: "absolute",
width: "100%",
maxWidth: "500px",
backgroundColor: theme.palette.background.paper,
border: "0px solid #000",
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
direction: "rtl",
fontFamily: "numeralLight",
},
}));
export default function SimpleModal(props) {
const classes = useStyles();
// getModalStyle is not a pure function, we roll the style only on the first render
const [modalStyle] = React.useState(getModalStyle);
const body = (
<div style={modalStyle} className={classes.paper + " material-modal"}>
<h2
id="simple-modal-title"
style={{
fontSize:
window.innerWidth > 1000 ? fontSize.desktop.h2 : fontSize.mobile.h2,
marginBottom: 20,
color: "#4e4e4e",
letterSpacing: "-1px",
}}
>
کامنت خود را وارد کرده و دکمه ثبت را بزنید.
</h2>
<textarea placeholder="متن پیام" name="description" rows="5"></textarea>
<button style={{ marginTop: 20, borderRadius: 6, padding: 8 }}>
ثبت
</button>
</div>
);
return (
<div>
<Modal
open={props.openComment}
onClose={props.handleOpenComment}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
{body}
</Modal>
</div>
);
}