hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design and responsive page doctor and account

Browse Source
This commit is contained in:
Ehsan
2024-08-30 11:59:53 +03:30
parent 707206450c
commit 451ae76cb1
15 changed files with 251 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/doctor/detailDoctor/cards/comments/chart/ProgressDetail.js → app/component/ProfressDetail.js
+4 -4
View File
@@ -1,14 +1,14 @@
import { numberToArStyle } from "@/helper"
import { LinearProgress } from "@mui/material"
function Progress({ data }) {
function ProgressDetail({ data }) {
return (
<li className="flex items-center justify-start gap-2">
<li className="flex items-center justify-start gap-2 w-full">
<p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p>
<LinearProgress
value={data.progress}
variant="determinate"
className="!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
sx={{
'& .MuiLinearProgress-bar': {
background: '#05BA58',
@@ -21,4 +21,4 @@ function Progress({ data }) {
)
}
export default Progress
export default ProgressDetail
app/component/comment/ItemUser.js
+7 -6
View File
@@ -9,7 +9,7 @@ import DisLikeComment from "@/components/icons/DisLikeComment";
import ArrowUpComment from "@/components/icons/ArrowUpComment";
import LikeComment from "@/components/icons/LikeComment";
function ItemUser({ update, setUpdate, list, setList, data, loading }) {
function ItemUser({ update, setUpdate, isReply, list, setList, data, loading }) {
const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
if (nameIsLike === 'is_like' && data.is_dislike) {
@@ -48,14 +48,14 @@ function ItemUser({ update, setUpdate, list, setList, data, loading }) {
)}
</div>
</div>
<div className="mr-12 mt-2">
<div className="mt-2">
{loading ? (
<>
<Skeleton variant="text" className="!w-full !mt-8" />
<Skeleton variant="text" className="!w-1/3" />
</>
) : (
<p className="text-[#495057] text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">{data.comment}</p>
<p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">{data.comment}</p>
)}
<div className="flex items-center justify-start mt-2 gap-[28px]">
<div className="flex items-center justify-start gap-1">
@@ -139,14 +139,15 @@ function ItemUser({ update, setUpdate, list, setList, data, loading }) {
</div>
)}
<ul
className={`flex flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12
${loading && 'w-full'}
${data.is_open_reply ? 'max-h-fit mt-12' : 'max-h-0'}`}
className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12
${loading && 'w-full'}
${data.is_open_reply ? 'max-h-screen mt-12' : 'max-h-0'}`}
>
{data.replays.map((item, idx) => (
<ItemUser
key={idx}
data={item}
isReply={true}
update={update}
loading={loading}
setUpdate={setUpdate}
app/component/openLocation/Content.js
+40
View File
@@ -0,0 +1,40 @@
import CloseModalD from '@/components/icons/CloseModalD'
import Image from 'next/image'
const maps = [
{ src: '/assets/images/snapp.png', name: 'snapp' },
{ src: '/assets/images/tapsi.png', name: 'tapsi' },
{ src: '/assets/images/maps.png', name: 'maps' },
{ src: '/assets/images/balad.png', name: 'balad' },
{ src: '/assets/images/waze.png', name: 'waze' }
]
function Content({ handleClose }) {
return (
<>
<div className="flex items-center justify-between">
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">باز شدن با</p>
<div className="cursor-pointer" onClick={handleClose}>
<CloseModalD />
</div>
</div>
<span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
<ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
{maps.map((item, idx) => (
<li className="flex items-center flex-col justify-center gap-1">
<Image
className='w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]'
src={item.src}
alt="icon app"
height={40}
width={40}
/>
<p className="text-[#3B3B3B] font-normal text-[14px]">{item.name}</p>
</li>
))}
</ul>
</>
)
}
export default Content
app/component/openLocation/index.js
+51
View File
@@ -0,0 +1,51 @@
'use client';
import { Drawer, Modal } from "@mui/material";
import { styleDefault } from "@/mui";
import Content from "./Content";
function ModalOpenLocation({ open, setOpen, handleClose, children }) {
const toggleDrawer = (newOpen) => () => {
setOpen(newOpen);
};
return (
<>
{/* Button Modal */}
{children}
{/* Content Modal */}
<Modal
open={open}
onClose={handleClose}
className="!hidden md:!flex"
>
<div
style={styleDefault}
className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
>
<Content onClose={handleClose} />
</div>
</Modal>
<Drawer
open={open}
anchor="bottom"
onClose={toggleDrawer(false)}
className="!flex md:!hidden"
sx={{
'& .MuiPaper-root': {
borderRadius: '25px 25px 0px 0px'
}
}}
>
<div
className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(155,_155,_155,_0.27)]"
>
<Content handleClose={handleClose} />
</div>
</Drawer>
</>
)
}
export default ModalOpenLocation
components/clinic/components/contact/index.js
+1 -1
View File
@@ -2,9 +2,9 @@ import { useState } from "react";
import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
import { Button } from "@mui/material";
import ModalOpenLocation from "./modal";
import Detail from "./Detail";
import RoutingC from "@/components/icons/RoutingC";
import ModalOpenLocation from "@/app/component/openLocation";
function Contact({ data }) {
components/doctor/detailDoctor/Link.js
+1 -1
View File
@@ -27,7 +27,7 @@ function Link() {
>
<Button
onClick={() => setActiveId(idx)}
className={`!text-[20px] !text-center !font-bold !p-1
className={`!text-[16px] md:!text-[18px] lg:!text-[20px] !text-center !font-bold !p-1
${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
`}
variant="text">
components/doctor/detailDoctor/cards/AboutDcotor.js
+1 -1
View File
@@ -37,7 +37,7 @@ function AboutDcotor({ doctor }) {
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">تخصص ها</p>
<ul className="flex flex-wrap gap-y-1 items-center justify-start gap-4">
{doctor.specialties.map((item, idx) => (
<li className="flex items-center justify-start gap-1">
<li key={idx} className="flex items-center justify-start gap-1">
<span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
<p className="text-[#616161] text-[16px] font-normal">{item}</p>
</li>
components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js
+1 -1
View File
@@ -3,7 +3,7 @@ import { CircularProgress } from "@mui/material"
function ProgressAll({ doctor }) {
return (
<div className="w-full h-fit relative">
<div className="hidden lg:flex w-full h-fit relative">
<CircularProgress
variant="determinate"
value={doctor.total_user_satisfaction}
components/doctor/detailDoctor/cards/comments/chart/index.js
+20 -5
View File
@@ -1,10 +1,15 @@
import { Rating } from "@mui/material"
import Progress from "./ProgressDetail"
import ProgressAll from "./ProgressAll"
import StarDI from "@/components/icons/StarDI"
import LikeDI from "@/components/icons/LikeDI"
import ProgressDetail from "@/app/component/ProfressDetail"
function Chart({ doctor }) {
return (
<div className='rounded-lg my-6 border border-[#EFEFEF] bg-[#FFF] pt-4 pb-6 px-6'>
<div className='
rounded-lg my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] border border-[#EFEFEF] bg-[#FFF]
pt-[12px] md:pt-[14px] lg:pt-[16px] pb-[12px] sm:pb-[16px] md:pb-[20px] lg:pb-[24px] px-[12px] sm:px-[16px] md:px-[20px] lg:px-[24px]
'>
<div className='flex items-center justify-start gap-2.5'>
<p className="text-[#616161] text-[14px] font-medium">امتیاز کلی کاربران: {doctor.overall_score} از 5</p>
<p className="text-[#7E7E7E] text-[14px] font-normal">(از مجموع {doctor.comments.length} نظر)</p>
@@ -14,12 +19,22 @@ function Chart({ doctor }) {
value={4}
size="small"
name="read-only"
className="!mt-4 !mb-6"
className="!mt-4 !mb-6 !hidden lg:!flex"
/>
<div className="flex items-center justify-start gap-2 my-[12px]">
<div className="flex p-1 gap-0.5 items-start justify-center">
<StarDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
</div>
<div className="flex p-1 items-start gap-0.5">
<LikeDI />
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
</div>
</div>
<div className="flex items-center justify-center gap-[50px]">
<ul className="flex flex-col items-start justify-start gap-1.5">
<ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
{doctor.progress_detail.map((item, idx) => (
<Progress
<ProgressDetail
data={item}
key={idx}
/>
components/doctor/detailDoctor/cards/comments/index.js
+5 -9
View File
@@ -1,23 +1,19 @@
import { Button } from '@mui/material'
import Chart from './chart'
import Comment from '@/app/component/comment'
import ModalAnswer from './modal/ModalAnswer'
function Comments({ doctor }) {
return (
<div className='mt-8'>
<div className='mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]'>
<a
id="comments"
className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
></a>
<div>
<p className="text-[#525252] text-[20px] font-bold">نظرات کاربران </p>
</div>
<div className='mt-8 flex items-center justify-start'>
<p className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold">نظرات کاربران </p>
<div className='mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[32px] flex flex-col md:flex-row gap-y-[20px] items-start md:items-center justify-start'>
<p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:</p>
<Button
variant='outlined'
className='!py-2.5 !px-9 !mr-4 !rounded'
>ثبت نظر</Button>
<ModalAnswer doctor={doctor} />
</div>
<Chart doctor={doctor} />
<Comment data={doctor} />
components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js
+66
View File
@@ -0,0 +1,66 @@
'use client';
import { useState } from "react";
import { styleDefault } from "@/mui";
import { Box, Button, Modal, Rating, TextField } from "@mui/material";
import CloseModalD from "@/components/icons/CloseModalD";
import ProgressDetail from "@/app/component/ProfressDetail";
import Field from "@/app/component/Field";
function ModalAnswer({ doctor }) {
const [open, setOpen] = useState(true);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<>
<Button
variant='outlined'
onClick={handleOpen}
className='!py-2 md:!py-2.5 !px-[16px] sm:!px-[23px] md:!px-[29px] lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full'
>ثبت نظر</Button>
<Modal
open={open}
onClose={handleClose}
>
<Box
sx={styleDefault}
className="!w-full !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[13px] !pb-[30px]"
>
<div className="w-full flex justify-end">
<CloseModalD />
</div>
<p className="text-[16px]">امتیاز شما به دکتر مهران امینی</p>
<Rating
className="!my-[24px]"
sx={{
'& .MuiSvgIcon-root': {
width: '12px',
height: '12px'
}
}}
/>
<ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
{doctor.progress_detail.map((item, idx) => (
<ProgressDetail
data={item}
key={idx}
/>
))}
</ul>
<div className="flex flex-col justify-center items-start mt-[24px]">
<p className='text-[#495057] text-[16px] font-bold'>متن نظر</p>
<Field
type='number'
multiline={true}
title='نظر خود را بنویسید...'
/>
</div>
</Box>
</Modal>
</>
)
}
export default ModalAnswer
components/doctor/detailDoctor/cards/locations/Item.js
+50 -10
View File
@@ -3,11 +3,18 @@
import { useState } from 'react';
import { Button } from '@mui/material';
import ArrowBottomGrayD from '@/components/icons/ArrowBottomGrayD';
import ModalOpenLocation from '@/app/component/openLocation';
import RoutingWhiteC from '@/components/icons/RoutingWhiteC';
import RoutingC from '@/components/icons/RoutingC';
function Item({ data }) {
const [isOpen, setIsOpen] = useState(false);
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<>
<a
@@ -42,17 +49,50 @@ function Item({ data }) {
<div className="gap-3 md:gap-4 flex flex-col items-start mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px]">
<p className="text-[#525252] text-[16px] font-normal">آدرس: {data.address}</p>
<p className="text-[#525252] text-[16px] font-normal">تلفن: {data.phone}</p>
<p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {data.working_days}</p>
<div className='flex w-full items-center justify-between'>
<p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {data.working_days}</p>
<ModalOpenLocation
open={open}
setOpen={setOpen}
handleClose={handleClose}
>
<Button
className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
onClick={handleOpen}
variant="outlined"
>
<RoutingC />
مسیریابی
</Button>
</ModalOpenLocation>
</div>
</div>
<div
className="w-full relative h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px] mt-[24px]"
>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d99748.77423686371!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e1!3m2!1sen!2snl!4v1724802057795!5m2!1sen!2snl"
className='
w-full rounded-lg mt-4 h-full
'
referrerPolicy="no-referrer-when-downgrade"
allowFullScreen=""
loading="lazy"
></iframe>
<ModalOpenLocation
open={open}
setOpen={setOpen}
handleClose={handleClose}
>
<Button
className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-[4px] !border !border-[#5559CE] !py-2 !px-3
!bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)] !gap-[8px] !text-[#FAFAFA] !text-[14px] !font-medium"
onClick={handleOpen}
>
<RoutingWhiteC />
مسیریابی
</Button>
</ModalOpenLocation>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d99748.77423686371!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e1!3m2!1sen!2snl!4v1724802057795!5m2!1sen!2snl"
className='
w-full rounded-lg mt-4
h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px]
'
referrerPolicy="no-referrer-when-downgrade"
allowFullScreen=""
loading="lazy"
></iframe>
</div>
</>
)
components/doctor/index.js
+1 -1
View File
@@ -4,7 +4,7 @@ import Share from "./detailDoctor/Share";
function DoctorPage({ doctor }) {
return (
<div className="pt-[120px] mt-[56px] padding-responsive">
<div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
<div className="flex items-center justify-between">
<div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
<p className="text-[#9B9B9B] text-nowrap">متخصص {doctor.expertise} {' >'}</p>
components/icons/ArrowBottomGrayD.js
+1 -1
View File
@@ -1,7 +1,7 @@
function ArrowBottomGrayD() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M16.5999 7.45834L11.1666 12.8917C10.5249 13.5333 9.4749 13.5333 8.83324 12.8917L3.3999 7.45834" stroke="#616161" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M16.5999 7.45834L11.1666 12.8917C10.5249 13.5333 9.4749 13.5333 8.83324 12.8917L3.3999 7.45834" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
}
components/icons/ArrowLeftBlueA.js
+2 -2
View File
@@ -1,8 +1,8 @@
function ArrowLeftBlueA() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M7.97435 4.94168L2.91602 10L7.97435 15.0583" stroke="#5559CE" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M17.0836 10H3.05859" stroke="#5559CE" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.97435 4.94168L2.91602 10L7.97435 15.0583" stroke="#5559CE" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M17.0836 10H3.05859" stroke="#5559CE" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
}