diff --git a/app/component/element/AutoCompleteSelect.js b/app/component/element/AutoCompleteSelect.js index af0ad27..be2bb29 100644 --- a/app/component/element/AutoCompleteSelect.js +++ b/app/component/element/AutoCompleteSelect.js @@ -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 => } diff --git a/app/globals.css b/app/globals.css index 5c7cf26..10a1da6 100644 --- a/app/globals.css +++ b/app/globals.css @@ -123,6 +123,10 @@ body { /* Scroll */ +html { + scroll-behavior: smooth; +} + ::-webkit-scrollbar { width: 7px; } diff --git a/components/doctor/detailDoctor/Link.js b/components/doctor/detailDoctor/Link.js index 66497b8..b358af8 100644 --- a/components/doctor/detailDoctor/Link.js +++ b/components/doctor/detailDoctor/Link.js @@ -17,12 +17,10 @@ function Link() { {listLink.map((item, idx) => (
  • ) diff --git a/components/doctor/detailDoctor/cards/AboutDcotor.js b/components/doctor/detailDoctor/cards/AboutDcotor.js index a482013..2d530a9 100644 --- a/components/doctor/detailDoctor/cards/AboutDcotor.js +++ b/components/doctor/detailDoctor/cards/AboutDcotor.js @@ -1,6 +1,10 @@ function AboutDcotor({ doctor }) { return (
    +

    {doctor.detail}

    تخصص ها

    diff --git a/components/doctor/detailDoctor/cards/LocationDoctor.js b/components/doctor/detailDoctor/cards/LocationDoctor.js index 35fbae7..942c771 100644 --- a/components/doctor/detailDoctor/cards/LocationDoctor.js +++ b/components/doctor/detailDoctor/cards/LocationDoctor.js @@ -1,7 +1,11 @@ function LocationDoctor({ doctor }) { return (
    -
    + +

    موقعیت مکانی

    diff --git a/components/doctor/detailDoctor/cards/comments/index.js b/components/doctor/detailDoctor/cards/comments/index.js index 7d06eac..3d4e32d 100644 --- a/components/doctor/detailDoctor/cards/comments/index.js +++ b/components/doctor/detailDoctor/cards/comments/index.js @@ -5,8 +5,12 @@ import Comment from '@/app/component/comment' function Comments({ doctor }) { return (
    +
    -

    موقعیت مکانی

    +

    نظرات کاربران

    شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:

    diff --git a/components/doctor/detailDoctor/index.js b/components/doctor/detailDoctor/index.js index b3645bf..fdccca0 100644 --- a/components/doctor/detailDoctor/index.js +++ b/components/doctor/detailDoctor/index.js @@ -8,7 +8,9 @@ import LocationDoctor from "./cards/LocationDoctor" function DetailDoctor({ doctor }) { return (
    - +
    + +
    <Link /> <AboutDcotor doctor={doctor} /> diff --git a/components/doctor/index.js b/components/doctor/index.js index e3b1620..55f4bba 100644 --- a/components/doctor/index.js +++ b/components/doctor/index.js @@ -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} /> diff --git a/components/doctors/index.js b/components/doctors/index.js index 8455fed..d947f2a 100644 --- a/components/doctors/index.js +++ b/components/doctors/index.js @@ -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 /> diff --git a/components/doctors/modal/Content.js b/components/doctors/modal/Content.js index ae167ee..19a94a6 100644 --- a/components/doctors/modal/Content.js +++ b/components/doctors/modal/Content.js @@ -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> ) diff --git a/components/doctors/modal/FilterModal.js b/components/doctors/modal/FilterModal.js index e0bfc6c..6181079 100644 --- a/components/doctors/modal/FilterModal.js +++ b/components/doctors/modal/FilterModal.js @@ -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> </> diff --git a/components/doctors/modal/RadioContent.js b/components/doctors/modal/RadioContent.js new file mode 100644 index 0000000..74548bd --- /dev/null +++ b/components/doctors/modal/RadioContent.js @@ -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 \ No newline at end of file diff --git a/components/doctors/modal/Radios.js b/components/doctors/modal/Radios.js index 43996c8..4911743 100644 --- a/components/doctors/modal/Radios.js +++ b/components/doctors/modal/Radios.js @@ -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> ) diff --git a/components/doctors/search/index.js b/components/doctors/search/index.js index 8dd7db4..671269e 100644 --- a/components/doctors/search/index.js +++ b/components/doctors/search/index.js @@ -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" diff --git a/components/doctors/sortlist/SelectSort.js b/components/doctors/sortlist/SelectSort.js index 646fee7..a14f3d5 100644 --- a/components/doctors/sortlist/SelectSort.js +++ b/components/doctors/sortlist/SelectSort.js @@ -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> ) } diff --git a/components/doctors/sortlist/index.js b/components/doctors/sortlist/index.js index 23785b8..57b3e2a 100644 --- a/components/doctors/sortlist/index.js +++ b/components/doctors/sortlist/index.js @@ -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> ) diff --git a/components/home/index.js b/components/home/index.js index 5f7ea0c..7b636f0 100644 --- a/components/home/index.js +++ b/components/home/index.js @@ -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