taha12322
3 years ago
parent
0b8ab1fd8d
commit
e87203301d
12 changed files with 228 additions and 15 deletions
@ -0,0 +1,31 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { Modal, ModalBody, ModalHeader } from "reactstrap"; |
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; |
||||||
|
import { faTimes } from "@fortawesome/free-solid-svg-icons"; |
||||||
|
|
||||||
|
import "./Modal.scss"; |
||||||
|
|
||||||
|
const CommentModal = ({ modal, toggle }) => { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Modal isOpen={modal} toggle={toggle} style={{top: '10rem',}}> |
||||||
|
<ModalHeader className='modalHeader'> |
||||||
|
<button className="btn" onClick={toggle}> |
||||||
|
<FontAwesomeIcon icon={faTimes} /> |
||||||
|
</button> |
||||||
|
</ModalHeader> |
||||||
|
<ModalBody className='modalBody'> |
||||||
|
<textarea |
||||||
|
className="InputGetComment" |
||||||
|
placeholder="نظر خود را بنویسید..." |
||||||
|
></textarea> |
||||||
|
<button className="sendComment" onClick={toggle}> |
||||||
|
ارسال |
||||||
|
</button> |
||||||
|
</ModalBody> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default CommentModal; |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
.modal-content { |
||||||
|
border: none !important; |
||||||
|
border-radius: 15px !important; |
||||||
|
.modalHeader { |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end !important; |
||||||
|
border: none !important; |
||||||
|
padding: 0 !important; |
||||||
|
} |
||||||
|
.modalBody { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: center; |
||||||
|
padding-top: 0 !important; |
||||||
|
.InputGetComment { |
||||||
|
background-color: #f5f5f5; |
||||||
|
border: none; |
||||||
|
border-radius: 15px; |
||||||
|
color: #000; |
||||||
|
font-size: 13px; |
||||||
|
width: 100%; |
||||||
|
resize: none; |
||||||
|
padding: 8px 1rem; |
||||||
|
height: 155px; |
||||||
|
margin-bottom: 8px; |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
.sendComment { |
||||||
|
text-align: center; |
||||||
|
background-color: #634dce; |
||||||
|
color: #fff; |
||||||
|
border: none; |
||||||
|
border-radius: 10px; |
||||||
|
width: 100%; |
||||||
|
padding: 6px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -1,13 +1,17 @@ |
|||||||
import React from 'react' |
import React from "react"; |
||||||
|
import WeekdayList from "./WeekDayList/WeekdayList"; |
||||||
|
|
||||||
const Presents = () => { |
const Presents = () => { |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
<header> |
<header className='mt-4 mb-2'>
|
||||||
ساعات حضور |
<h6>ساعات حضور</h6> |
||||||
</header> |
</header> |
||||||
|
<nav className='row p-0'> |
||||||
|
<WeekdayList /> |
||||||
|
</nav> |
||||||
</> |
</> |
||||||
) |
); |
||||||
} |
}; |
||||||
|
|
||||||
export default Presents |
export default Presents; |
||||||
|
|||||||
@ -0,0 +1,82 @@ |
|||||||
|
import React from "react"; |
||||||
|
import "./WeekdayList.scss"; |
||||||
|
|
||||||
|
const WeekdayList = () => { |
||||||
|
const Weekdaylist = [ |
||||||
|
{ |
||||||
|
color: "#A8E03D", |
||||||
|
bgcolor: "#A8E03D20", |
||||||
|
title: "شنبه", |
||||||
|
time1: "۲۲:۰۰", |
||||||
|
time2: "۱۸:۳۰", |
||||||
|
}, |
||||||
|
{ |
||||||
|
color: "#F11BE2", |
||||||
|
bgcolor: "##F11BE230", |
||||||
|
title: "یک شنبه ", |
||||||
|
time1: "۲۲:۰۰", |
||||||
|
time2: "۱۸:۳۰", |
||||||
|
}, |
||||||
|
{ |
||||||
|
color: "#76C4F5", |
||||||
|
bgcolor: "#76C4F520", |
||||||
|
title: "دو شنبه", |
||||||
|
time1: "۲۲:۰۰", |
||||||
|
time2: "۱۸:۳۰", |
||||||
|
}, |
||||||
|
{ |
||||||
|
color: "#FC8539", |
||||||
|
bgcolor: "#FC853920", |
||||||
|
title: "سه شنبه ", |
||||||
|
time1: "۲۲:۰۰", |
||||||
|
time2: "۱۸:۳۰", |
||||||
|
}, |
||||||
|
{ |
||||||
|
color: "#F87674", |
||||||
|
bgcolor: "#F8767420", |
||||||
|
title: "چهار شنبه ", |
||||||
|
time1: "۲۲:۰۰", |
||||||
|
time2: "۱۸:۳۰", |
||||||
|
}, |
||||||
|
{ |
||||||
|
color: "#08E3E4", |
||||||
|
bgcolor: "#08E3E420", |
||||||
|
title: "چنج شنبه", |
||||||
|
time1: "۲۲:۰۰", |
||||||
|
time2: "۱۸:۳۰", |
||||||
|
}, |
||||||
|
{ |
||||||
|
color: "#9C9C9C", |
||||||
|
bgcolor: "#9C9C9C20", |
||||||
|
title: "جمعه", |
||||||
|
time1: "۲۲:۰۰", |
||||||
|
time2: "۱۸:۳۰", |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{Weekdaylist.map((item) => ( |
||||||
|
<> |
||||||
|
<nav className="mainNav col-6"> |
||||||
|
<nav className="navDay" style={{ backgroundColor: item.bgcolor }}> |
||||||
|
<nav className="navTitle" style={{ backgroundColor: item.color }}> |
||||||
|
<p className="title">{item.title}</p> |
||||||
|
</nav> |
||||||
|
<nav> |
||||||
|
<p> |
||||||
|
{item.time1} تا {item.time2} |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
{item.time1} تا {item.time2} |
||||||
|
</p> |
||||||
|
</nav> |
||||||
|
</nav> |
||||||
|
</nav> |
||||||
|
</> |
||||||
|
))} |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default WeekdayList; |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
.mainNav { |
||||||
|
display: flex; |
||||||
|
margin-bottom: 1rem; |
||||||
|
.navDay { |
||||||
|
width: 180px; |
||||||
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 12px; |
||||||
|
border-radius: 10px; |
||||||
|
text-align: center; |
||||||
|
padding-top: 8px; |
||||||
|
|
||||||
|
.navTitle { |
||||||
|
width: 80px; |
||||||
|
border-radius: 20px; |
||||||
|
margin: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue