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 = () => { |
||||
return ( |
||||
<> |
||||
<header> |
||||
ساعات حضور |
||||
<header className='mt-4 mb-2'>
|
||||
<h6>ساعات حضور</h6> |
||||
</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