From e87203301d781948f72e1d40f2475746a92ff133 Mon Sep 17 00:00:00 2001 From: taha12322 <66300435+taha12322@users.noreply.github.com> Date: Thu, 2 Sep 2021 05:40:06 +0430 Subject: [PATCH] with modal --- profile/package.json | 3 + profile/src/Profile.js | 4 +- profile/src/components/about-doctor/About.js | 2 +- profile/src/components/comments/Comments.js | 14 +++- profile/src/components/comments/comments.scss | 8 +- profile/src/components/modal/Modal.js | 31 +++++++ profile/src/components/modal/Modal.scss | 39 +++++++++ profile/src/components/present/Presents.js | 16 ++-- .../present/WeekDayList/WeekdayList.js | 82 +++++++++++++++++++ .../present/WeekDayList/WeekdayList.scss | 17 ++++ profile/src/components/request/Request.scss | 1 - profile/yarn.lock | 26 ++++++ 12 files changed, 228 insertions(+), 15 deletions(-) create mode 100644 profile/src/components/modal/Modal.js create mode 100644 profile/src/components/modal/Modal.scss create mode 100644 profile/src/components/present/WeekDayList/WeekdayList.js create mode 100644 profile/src/components/present/WeekDayList/WeekdayList.scss diff --git a/profile/package.json b/profile/package.json index 4dc5746..d560bf5 100644 --- a/profile/package.json +++ b/profile/package.json @@ -3,6 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.36", + "@fortawesome/free-solid-svg-icons": "^5.15.4", + "@fortawesome/react-fontawesome": "^0.1.15", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", diff --git a/profile/src/Profile.js b/profile/src/Profile.js index b72017d..7ca5a82 100644 --- a/profile/src/Profile.js +++ b/profile/src/Profile.js @@ -3,15 +3,17 @@ import Request from "./components/request/Request"; import About from "./components/about-doctor/About"; import Comments from "./components/comments/Comments"; import Presents from "./components/present/Presents"; +import CommentModal from "./components/modal/Modal"; const Profile = () => { return ( <> -
+
+
); diff --git a/profile/src/components/about-doctor/About.js b/profile/src/components/about-doctor/About.js index a7fce13..729a0ef 100644 --- a/profile/src/components/about-doctor/About.js +++ b/profile/src/components/about-doctor/About.js @@ -3,7 +3,7 @@ import './About.scss' const About = () => { return ( -
+
درباره پزشک

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده diff --git a/profile/src/components/comments/Comments.js b/profile/src/components/comments/Comments.js index cd46b2e..c1bd7c2 100644 --- a/profile/src/components/comments/Comments.js +++ b/profile/src/components/comments/Comments.js @@ -1,13 +1,14 @@ -import React from "react"; +import React , {useState} from "react"; import Component from "./Comment/Comment"; import star from "../../assets/star.svg"; import avatar1 from "../../assets/man1.svg"; import avatar2 from "../../assets/man2.svg"; import plus from "../../assets/plus.svg"; +import CommentModal from "../modal/Modal"; import "./comments.scss"; -const comments = () => { +const Comments = () => { const comments = [ { name: "محسن محمدی", @@ -36,6 +37,10 @@ const comments = () => { }, ]; + //modal comment + const [modal, setModal] = useState(false); + const toggle = () => setModal(!modal); + return ( <>

@@ -62,14 +67,15 @@ const comments = () => { ))}
- + ); }; -export default comments; +export default Comments; diff --git a/profile/src/components/comments/comments.scss b/profile/src/components/comments/comments.scss index 91a0272..02561e6 100644 --- a/profile/src/components/comments/comments.scss +++ b/profile/src/components/comments/comments.scss @@ -20,12 +20,16 @@ } .insertCommentBtn{ + font-size: 13px; display: flex; border-radius: 50px; - box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 12px; border: none; + align-items: center; background-color: #fff; - padding: 8px 0.75rem; + justify-content: space-between; + padding: 4px 0.5rem; + margin-bottom: 2rem; } .circleNav{ diff --git a/profile/src/components/modal/Modal.js b/profile/src/components/modal/Modal.js new file mode 100644 index 0000000..d34f9f2 --- /dev/null +++ b/profile/src/components/modal/Modal.js @@ -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 ( +
+ + + + + + + + + +
+ ); +}; + +export default CommentModal; diff --git a/profile/src/components/modal/Modal.scss b/profile/src/components/modal/Modal.scss new file mode 100644 index 0000000..6748be1 --- /dev/null +++ b/profile/src/components/modal/Modal.scss @@ -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; + } + } +} diff --git a/profile/src/components/present/Presents.js b/profile/src/components/present/Presents.js index 63147f7..efc9d11 100644 --- a/profile/src/components/present/Presents.js +++ b/profile/src/components/present/Presents.js @@ -1,13 +1,17 @@ -import React from 'react' +import React from "react"; +import WeekdayList from "./WeekDayList/WeekdayList"; const Presents = () => { return ( <> -
- ساعات حضور +
+
ساعات حضور
+ - ) -} + ); +}; -export default Presents +export default Presents; diff --git a/profile/src/components/present/WeekDayList/WeekdayList.js b/profile/src/components/present/WeekDayList/WeekdayList.js new file mode 100644 index 0000000..6a1fe79 --- /dev/null +++ b/profile/src/components/present/WeekDayList/WeekdayList.js @@ -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) => ( + <> + + + ))} + + ); +}; + +export default WeekdayList; diff --git a/profile/src/components/present/WeekDayList/WeekdayList.scss b/profile/src/components/present/WeekDayList/WeekdayList.scss new file mode 100644 index 0000000..d00583a --- /dev/null +++ b/profile/src/components/present/WeekDayList/WeekdayList.scss @@ -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; + } + } +} diff --git a/profile/src/components/request/Request.scss b/profile/src/components/request/Request.scss index 5634206..a2e186e 100644 --- a/profile/src/components/request/Request.scss +++ b/profile/src/components/request/Request.scss @@ -5,7 +5,6 @@ text-align: center; margin: 0 auto 1.5rem auto; .navItems { - // border: gray solid 1.5px; display: flex; justify-content: space-around; align-items: center; diff --git a/profile/yarn.lock b/profile/yarn.lock index d3948ab..5c3ced8 100644 --- a/profile/yarn.lock +++ b/profile/yarn.lock @@ -1177,6 +1177,32 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@fortawesome/fontawesome-common-types@^0.2.36": + version "0.2.36" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903" + integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg== + +"@fortawesome/fontawesome-svg-core@^1.2.36": + version "1.2.36" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3" + integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.36" + +"@fortawesome/free-solid-svg-icons@^5.15.4": + version "5.15.4" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5" + integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.36" + +"@fortawesome/react-fontawesome@^0.1.15": + version "0.1.15" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.15.tgz#1450b838f905981d721bf07e14e3b52c0e9a91ed" + integrity sha512-/HFHdcoLESxxMkqZAcZ6RXDJ69pVApwdwRos/B2kiMWxDSAX2dFK8Er2/+rG+RsrzWB/dsAyjefLmemgmfE18g== + dependencies: + prop-types "^15.7.2" + "@hapi/address@2.x.x": version "2.1.4" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"