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
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> |
|
); |
|
}
|
|
|