modal

src/Components/MeetAuthPage/index.jsx

@@ -3,34 +3,43 @@ import styles from './style.module.scss';
 import clock from '../../img/MeetPage/Clock.png';
 import globe from '../../img/MeetPage/Globe.png';
 import avatar from '../../img/MeetPage/avatar.png';
-
+import like from '../../img/MeetPage/Facebook.png';
 import Card from "../Card";
 import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
-import { useState, CSSProperties, useEffect, useRef } from "react";
+// import { useState, CSSProperties, useEffect, useRef } from "react";
 import newAvatar from '../../img/MeetPage/newAvatar.png';
 import vk from '../../img/MeetPage/Vk.png';
 import tg from '../../img/MeetPage/Telegram.png';
 import book from '../../img/MeetPage/Book.png';
+import { useState } from "react";
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
+
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: "56%",
+  height: "80vh",
+  bgcolor: 'background.paper',
+  borderRadius: '25px',
+  boxShadow: 24,
+  p: 4,
+};
 const MeetPage = () => {
 
-    // const textAreaRef = useRef<HTMLTextAreaElement>(null);
-    // const [text, setText] = useState("");
-    // const [textAreaHeight, setTextAreaHeight] = useState("auto");
-    // const [parentHeight, setParentHeight] = useState("auto");
-  
-    // const parentStyle= {
-    //   minHeight: parentHeight,
-    // };
-  
-    // const textAreaStyle= {
-    //   height: textAreaHeight,
-    // };
-
+    const [open, setOpen] = React.useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
   
 
     return (
         <>
+         
             <Header></Header>
 
             <section className={styles.meets}>
@@ -41,7 +50,7 @@ const MeetPage = () => {
                     <div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <span>22 декабря, с 10:00 до 22:00 по Московскому времени</span> </div>
                 </div>
                 <div className={styles.meets__img}></div>
-               
+                
             </section>
             <div className={styles.container}>
               
@@ -51,9 +60,9 @@ const MeetPage = () => {
                         <a href="#" className={styles.newMeeting__link}>Ссылка на мероприятие</a>
                         <a href="#" className={styles.newMeeting__ling_video}>СКАЧАТЬ ВИДЕО</a>
                     </div>
-                    <div className={styles.meets__otziv}>
-                        <span className={styles.meets__otziv_title}>Отзывы</span>
-                        Оставьте первый отзыв
+                    <div onClick={handleOpen} className={styles.meets__otziv}>
+                        <span className={styles.meets__otziv_title}>Оставить вопрос</span>
+                        Оставьте вопрос первым
                     </div>
                     
                 </div>
@@ -96,13 +105,7 @@ const MeetPage = () => {
                     <div className={styles.comments__input_container}>
                         <div className={styles.comments__input_img_container}>
                             <img className={styles.comments__input_img} src={newAvatar} alt='avatar'></img>
-                            <div style={parentStyle}>
-                            <textarea
-                            ref={textAreaRef}
-                            style={textAreaStyle}
-                            rows={1}
-                            />
-                        </div>
+                            <textarea placeholder="Дмитрий Кирканов" className={styles.comments__input}></textarea>
                         </div>
                         <div className={styles.comments__button_container}>
                             <button className={styles.comments__button}>ОТПРАВИТЬ</button>
@@ -121,6 +124,78 @@ const MeetPage = () => {
                                 </div>
                             </div>
                         </div>
+                        <div className={styles.oneComment__container}>
+                            <div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
+                            <div className={styles.oneComment__descr_container}>
+                                <div className={styles.oneComment__descr_title_container}>
+                                    <div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
+                                    <div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
+                                </div>
+                                <div className={styles.oneComment__descr}>
+                                    Хорошее мероприятие, специалист знает свое дело
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.oneComment__container}>
+                            <div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
+                            <div className={styles.oneComment__descr_container}>
+                                <div className={styles.oneComment__descr_title_container}>
+                                    <div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
+                                    <div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
+                                </div>
+                                <div className={styles.oneComment__descr}>
+                                    Хорошее мероприятие, специалист знает свое дело
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.oneComment__container}>
+                            <div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
+                            <div className={styles.oneComment__descr_container}>
+                                <div className={styles.oneComment__descr_title_container}>
+                                    <div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
+                                    <div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
+                                </div>
+                                <div className={styles.oneComment__descr}>
+                                    Хорошее мероприятие, специалист знает свое дело
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.oneComment__container}>
+                            <div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
+                            <div className={styles.oneComment__descr_container}>
+                                <div className={styles.oneComment__descr_title_container}>
+                                    <div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
+                                    <div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
+                                </div>
+                                <div className={styles.oneComment__descr}>
+                                    Хорошее мероприятие, специалист знает свое дело
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.oneComment__container}>
+                            <div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
+                            <div className={styles.oneComment__descr_container}>
+                                <div className={styles.oneComment__descr_title_container}>
+                                    <div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
+                                    <div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
+                                </div>
+                                <div className={styles.oneComment__descr}>
+                                    Хорошее мероприятие, специалист знает свое дело
+                                </div>
+                            </div>
+                        </div>
+                        <div className={styles.oneComment__container}>
+                            <div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
+                            <div className={styles.oneComment__descr_container}>
+                                <div className={styles.oneComment__descr_title_container}>
+                                    <div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
+                                    <div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
+                                </div>
+                                <div className={styles.oneComment__descr}>
+                                    Хорошее мероприятие, специалист знает свое дело
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 
@@ -145,6 +220,43 @@ const MeetPage = () => {
                 </Grid>
             </Box>
             </section>
+            <div>
+     
+                    <Modal
+                        open={open}
+                        onClose={handleClose}
+                        aria-labelledby="modal-modal-title"
+                        aria-describedby="modal-modal-description"
+                    >
+                        <Box sx={style}>
+                        <div className={styles.modal__title}>Вопросы</div>
+                        <div className={styles.modal__close}><div className={styles.modal__close_img}>+</div></div>
+                        <div className={styles.modal__line}></div>
+                        <div className={styles.modal__question_number}>Всего  <span>1</span></div>
+                        <div className={styles.modal__question_container}>
+                            <div className={styles.modal__question_containerSecond}>
+                                <div className={styles.modal__question_user}>
+                                    <div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
+                                    <div className={styles.modal__question_user_descr}>Задача организации, в особенности же начало повседневной работы по формированию позиции обеспечивает актуальность приоретизации разума над эмоциями. </div>
+                                    <div className={styles.modal__question_time_container}>
+                                        <div className={styles.modal__question_time}>4 мая 1990, 00:00</div>
+                                        <div className={styles.modal__question_like_container}><img src={like} alt='like' className={styles.modal__question_like_container}></img> <span className={styles.modal__question_like}>0</span></div>
+                                    </div>
+                                    
+                                </div>
+                            </div>
+                            <div className={styles.modal__question_containerThird}>
+                                <div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
+                                <textarea placeholder="Дмитрий Кирканов" className={styles.modal__question_input}></textarea>
+                                <div className={styles.modal__question_button_container}>
+                                    <button className={styles.modal__question_button + ' ' + styles.yellow}>Задать вопрос</button>
+                                    <button className={styles.modal__question_button + ' ' + styles.gray}>Отменить</button>
+                                </div>
+                            </div>
+                        </div>
+                        </Box>
+                    </Modal>
+                    </div>
         </>
         
     )