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

change responsive page doctors & change modal and responsive & responsive page doctor item

Browse Source
This commit is contained in:
Ehsan
2024-08-18 14:39:34 +03:30
parent cd3b783abd
commit 8a53f60d7e
18 changed files with 179 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/element/AutoCompleteSelect.js
+6 -5
View File
@@ -8,9 +8,10 @@ function AutoCompleteSelect({ list, updateData, name, label }) {
disablePortal
options={list}
className="!w-full !rounded-lg md:!w-[344px]"
onChange={(event) =>
onChange={(event) => {
updateData &&
updateData(event, name)
updateData(event, name)
}
}
sx={{
...styleTextSelectRight,
@@ -24,9 +25,9 @@ function AutoCompleteSelect({ list, updateData, name, label }) {
'& .MuiInputBase-root': {
borderRadius: 2,
padding: '5px 16px !important'
}
},
}}
renderInput={(params) =>
renderInput={params =>
<TextField
fullWidth
{...params}
@@ -42,7 +43,7 @@ function AutoCompleteSelect({ list, updateData, name, label }) {
}}
placeholder={label}
sx={{
borderRadius: '8px',
borderRadius: '8px'
}}
/>
}
app/globals.css
+4
View File
@@ -123,6 +123,10 @@ body {
/* Scroll */
html {
scroll-behavior: smooth;
}
::-webkit-scrollbar {
width: 7px;
}
components/doctor/detailDoctor/Link.js
+1 -3
View File
@@ -17,12 +17,10 @@ function Link() {
{listLink.map((item, idx) => (
<li
key={idx}
className={`
`}
>
<a href={`#${item.link}`}>
<Button
onClick={() => setActiveId(idx)}
className={`
!text-[20px] !font-bold !mx-[56px] !py-px
${idx !== 0 && idx !== listLink.length - 1 ?
components/doctor/detailDoctor/Share.js
+3 -3
View File
@@ -5,11 +5,11 @@ function Share() {
return (
<div className="w-full text-left">
<Button
className="!gap-1 !p-2 !rounded-lg !text-[#525252] !text-[14px]"
variant="text"
className="!gap-1 !border-none lg:!border-[#EFEFEF] !p-2 !rounded-lg !text-[#525252] !text-[14px]"
variant="outlined"
>
<ShareDI />
اشتراک گذاری
<p className="hidden lg:flex">اشتراک گذاری</p>
</Button>
</div>
)
components/doctor/detailDoctor/cards/AboutDcotor.js
+4
View File
@@ -1,6 +1,10 @@
function AboutDcotor({ doctor }) {
return (
<div>
<a
id="about-doctor"
className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
></a>
<p className="text-[#616161] text-[14px] font-normal text-justify">{doctor.detail}</p>
<div className="my-2">
<p className="text-[#525252] text-[16px] font-bold">تخصص ها</p>
components/doctor/detailDoctor/cards/LocationDoctor.js
+5 -1
View File
@@ -1,7 +1,11 @@
function LocationDoctor({ doctor }) {
return (
<div>
<div className="my-8">
<a
id="location"
className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
></a>
<div className="mb-[16px] mt-[32px]">
<p className="text-[#525252] text-[20px] font-bold">موقعیت مکانی </p>
</div>
<div className="gap-4 flex flex-col items-start">
components/doctor/detailDoctor/cards/comments/index.js
+5 -1
View File
@@ -5,8 +5,12 @@ import Comment from '@/app/component/comment'
function Comments({ doctor }) {
return (
<div className='mt-4'>
<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>
<p className="text-[#525252] text-[20px] font-bold">نظرات کاربران </p>
</div>
<div className='mt-8 flex items-center justify-start'>
<p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:</p>
components/doctor/detailDoctor/index.js
+3 -1
View File
@@ -8,7 +8,9 @@ import LocationDoctor from "./cards/LocationDoctor"
function DetailDoctor({ doctor }) {
return (
<div className="w-[57%]">
<Share />
<div className="hidden lg:flex">
<Share />
</div>
<Title doctor={doctor} />
<Link />
<AboutDcotor doctor={doctor} />
components/doctor/index.js
+9 -3
View File
@@ -1,12 +1,18 @@
import AppointmentList from "./appointmentList"
import DetailDoctor from "./detailDoctor"
import Share from "./detailDoctor/Share";
function DoctorPage({ doctor }) {
return (
<div className="pt-[120px] mt-[56px] padding-responsive">
<div className="flex items-center justify-start text-[16px] font-normal">
<p className="text-[#9B9B9B]">متخصص {doctor.expertise} {' >'}</p>
<p className="text-[#525252] mr-1">{doctor.name}</p>
<div className="flex items-center justify-between">
<div className="flex items-center justify-start text-[16px] font-normal">
<p className="text-[#9B9B9B] text-nowrap">متخصص {doctor.expertise} {' >'}</p>
<p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
</div>
<div className="flex lg:hidden">
<Share />
</div>
</div>
<div className="flex items-start justify-center gap-6 mt-[30px]">
<DetailDoctor doctor={doctor} />
components/doctors/index.js
+16 -4
View File
@@ -1,9 +1,21 @@
import LocationD from "../icons/LocationD";
import ListDoctors from "./listDoctors";
'use client';
import { useState } from "react";
import SearchBar from "./search";
import SortList from "./sortlist";
import ListDoctors from "./listDoctors";
import LocationD from "../icons/LocationD";
function DoctorsPage() {
const [data, setData] = useState({
expertise: '',
gender: 0,
degree: 0,
turn: true
});
return (
<div className="pt-[120px] padding-responsive">
<div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-[90px]">
@@ -12,8 +24,8 @@ function DoctorsPage() {
<p className="text-[#525252] text-[16px] font-semibold">خوزستان / اهواز</p>
</div>
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
<SearchBar />
<SortList />
<SearchBar data={data} setData={setData} />
<SortList data={data} setData={setData} />
</div>
</div>
<ListDoctors />
components/doctors/modal/Content.js
+37 -6
View File
@@ -1,19 +1,50 @@
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import Radios from "./Radios";
import RadioContent from "./RadioContent";
import { Button, Switch } from "@mui/material";
const specialties = ['چشم پزشکی', 'چشم پزشکی', 'چشم پزشکی', 'چشم پزشکی', 'چشم پزشکی'];
const specialties = ['چشم پزشکی1', 'چشم پزشکی2', 'چشم پزشکی3', 'چشم پزشکی4', 'چشم پزشکی5'];
const group1 = ['خانم', 'آقا', 'هر دو'];
const group2 = ['فوق تخصص', 'دکترای تخصصی', 'متخصص', 'دکتری'];
const label = { inputProps: { 'aria-label': 'Switch demo' } };
function Content({ data, setData }) {
const changeData = (value, name) => {
setData({ ...data, [name]: value })
};
function Content() {
return (
<div className="mt-[50px] px-[38px] mb-[32px]">
<AutoCompleteSelect
updateData={(event) => changeData(event.target.innerText, 'expertise')}
list={specialties}
name='expertise'
label='تخصص'
/>
<div>
<p className="text-[16px] font-medium text-[#3B3B3B]">جنسیت پزشک</p>
<Radios group={group1} />
<div className="mt-[40px] mb-[32px]">
<RadioContent
changeData={(value) => changeData(+value, 'gender')}
value={data.gender}
text='جنسیت پزشک'
group={group1}
/>
<span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
<RadioContent
changeData={(value) => changeData(+value, 'degree')}
value={data.degree}
text='درجه علمی'
group={group2}
/>
<span className="block mt-[16px] mb-[24px] w-full h-px bg-[#EFEFEF]"></span>
<div className="flex items-center justify-start gap-[12px]">
<p className="text-[#3B3B3B] text-[16px] font-medium">فقط پزشکان دارای نوبت</p>
<Switch
{...label}
onChange={event => changeData(event.target.checked, 'turn')}
/>
</div>
</div>
</div>
)
components/doctors/modal/FilterModal.js
+26 -14
View File
@@ -6,9 +6,9 @@ import { Button, Modal } from "@mui/material";
import { useState } from "react";
import Content from "./Content";
function FilterModal({ children }) {
function FilterModal({ data, setData, children }) {
const [open, setOpen] = useState(true);
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
@@ -26,22 +26,34 @@ function FilterModal({ children }) {
>
<div
style={styleDefault}
className="!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
className="!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
!w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between"
>
<div
className="flex justify-between w-full"
>
<p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
<Button
className="cursor-pointer !p-0 flex items-center justify-center gap-1"
onClick={handleClose}
variant="text"
<div>
<div
className="flex justify-between w-full"
>
<CloseOrangeModal />
<p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
<p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
<Button
className="cursor-pointer !p-0 flex items-center justify-center gap-1"
onClick={handleClose}
variant="text"
>
<CloseOrangeModal />
<p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
</Button>
</div>
<Content data={data} setData={setData} />
</div>
<div className="flex justify-end w-full">
<Button
className="!px-3 !py-2 !text-[16px] !font-medium"
onClick={handleClose}
variant="contained"
>
اعمال تغییرات
</Button>
</div>
<Content />
</div>
</Modal>
</>
components/doctors/modal/RadioContent.js
+16
View File
@@ -0,0 +1,16 @@
import Radios from "./Radios"
function RadioContent({ group, text, value, changeData }) {
return (
<div>
<p className="text-[16px] font-medium text-[#3B3B3B]">{text}</p>
<Radios
changeData={changeData}
group={group}
value={value}
/>
</div>
)
}
export default RadioContent
components/doctors/modal/Radios.js
+20 -3
View File
@@ -1,10 +1,27 @@
import { FormControlLabel, Radio, RadioGroup } from "@mui/material"
function Radios({ group }) {
function Radios({ group, value, changeData }) {
return (
<RadioGroup>
<RadioGroup
value={value}
onChange={e => changeData(e.target.value)}
sx={{
'& .MuiFormControlLabel-root': {
marginRight: '0 !important',
transform: 'translateX(9px)'
}
}}
>
{group.map((item, idx) => (
<FormControlLabel value={idx} control={<Radio />} label={item} />
<FormControlLabel
control={
<Radio
className="!ml-2" />
}
label={item}
value={idx}
key={idx}
/>
))}
</RadioGroup>
)
components/doctors/search/index.js
+2 -2
View File
@@ -4,7 +4,7 @@ import ArrowBottomD from "@/components/icons/ArrowBottomD";
import SearchD from "@/components/icons/SearchD";
import FilterModal from "../modal/FilterModal";
function SearchBar() {
function SearchBar({ data, setData }) {
return (
<ButtonGroup
variant="contained"
@@ -12,7 +12,7 @@ function SearchBar() {
flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
!h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
>
<FilterModal>
<FilterModal data={data} setData={setData}>
<Button
className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
variant="contained"
components/doctors/sortlist/SelectSort.js
+16 -4
View File
@@ -3,6 +3,8 @@ import { useState } from "react";
import ArrowBottomD from "../../icons/ArrowBottomD";
import SortD from "../../icons/SortD";
const listSort = ['براساس امتیاز 1', 'براساس امتیاز 2', 'براساس امتیاز 3'];
function SelectSort() {
const [age, setAge] = useState('');
@@ -19,7 +21,7 @@ function SelectSort() {
className="!w-[193px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
renderValue={(value) => {
return (
<div className="w-[20px] gap-[4px] md:gap-[8px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
<div className="w-[20px] flex gap-[4px] md:gap-[8px] md:w-[22px] lg:w-[24px] h-[20px] md:h-[22px] lg:h-[24px]">
<SvgIcon color="primary">
<SortD />
</SvgIcon>
@@ -41,9 +43,19 @@ function SelectSort() {
}
}}
>
<MenuItem value='براساس امتیاز 1'>براساس امتیاز 1</MenuItem>
<MenuItem value='براساس امتیاز 2'>براساس امتیاز 2</MenuItem>
<MenuItem value='براساس امتیاز 3'>براساس امتیاز 3</MenuItem>
{listSort.map((item, idx) => (
<div key={idx} className="flex flex-col items-start w-full">
<MenuItem
value={item}
className="!p-2 !mr-2 !w-[calc(100%_-_16px)]"
>
{item}
</MenuItem>
{listSort.length > idx + 1 && (
<span className="block mr-2 w-[calc(100%_-_16px)] h-px bg-[#EFEFEF]"></span>
)}
</div>
))}
</Select>
)
}
components/doctors/sortlist/index.js
+5 -2
View File
@@ -1,12 +1,15 @@
'use client';
import FilterModal from "../modal/FilterModal";
import FilterBtn from "./FilterBtn";
import SelectSort from "./SelectSort";
function SortList() {
function SortList({ data, setData }) {
return (
<div className="flex items-center lg:!w-[25%] gap-[20px] lg:gap-0">
<FilterBtn />
<FilterModal data={data} setData={setData}>
<FilterBtn />
</FilterModal>
<SelectSort />
</div>
)
components/home/index.js
+1 -1
View File
@@ -7,7 +7,7 @@ import FrequentSearches from "./FrequentSearches";
function HomePage() {
return (
<div className="bg-banner-home !bg-center !bg-no-repeat !bg-cover">
<div className="bg-banner-home !bg-bottom !bg-no-repeat !bg-cover">
<div className="padding-responsive min-h-screen pt-[120px] flex items-center justify-center flex-col gap-[64px]">
<div>
<p