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

respnsive pages

Browse Source
This commit is contained in:
Ehsan
2024-08-19 21:48:15 +03:30
parent 8a53f60d7e
commit 381b0a9eea
20 changed files with 145 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/element/AutoCompleteSelect.js
+2 -3
View File
@@ -8,10 +8,9 @@ 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,
app/component/head/index.js
+8 -4
View File
@@ -1,9 +1,13 @@
function HeadPageList({ children, title, detail }) {
return (
<div className="bg-[#F6F7F9]">
<div className="padding-responsive pt-[195px] pb-[85px] flex flex-col items-center gap-[25px]">
<p className="text-[#3B3B3B] text-[24px] text-center font-bold">{title}</p>
<p className="text-[#3B3B3B] text-[16px] text-center font-normal">{detail}</p>
<div className="bg-head-menu !bg-no-repeat !bg-cover !bg-center">
<div className="
padding-responsive flex flex-col items-center gap-[25px]
pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]
pb-[62px] sm:pb-[69px] md:pb-[76px] lg:pb-[85px]
">
<p className="text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] text-center font-bold">{title}</p>
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] text-center font-normal">{detail}</p>
{children}
</div>
</div>
app/globals.css
+4
View File
@@ -240,6 +240,10 @@ html {
transition: 0.5s all;
}
.bg-head-menu {
background: url(../public/assets/images/bg-head-menu.png);
}
/* Hidden Scroll */
.hidden-scroll::-webkit-scrollbar-thumb {
components/clinics/head/SearchBar.js
+17 -18
View File
@@ -1,15 +1,15 @@
import ArrowBottomD from '@/components/icons/ArrowBottomD'
import SearchD from '@/components/icons/SearchD'
import SettingD from '@/components/icons/SettingD'
import { Button, ButtonGroup, TextField } from '@mui/material'
import React from 'react'
import ModalSearchCity from './modal'
import { Button, ButtonGroup, TextField } from '@mui/material';
import SearchD from '@/components/icons/SearchD';
import ModalSearchCity from './modal';
function SearchBar() {
return (
<ButtonGroup
variant="contained"
className="!bg-[#FFF] !w-2/3 !mt-[30px] !rounded-lg !overflow-hidden flex items-center !h-[64px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
className="
!bg-[#FFF] !w-2/3 !mt-[30px] !rounded-lg !overflow-hidden flex items-center
!shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
!h-fit !pl-1"
>
<ModalSearchCity />
<TextField
@@ -18,22 +18,21 @@ function SearchBar() {
disableUnderline: true
}}
sx={{
'& .MuiInputBase-root': {
height: '100%'
},
'& .MuiInput-root': {
borderBottom: 'none',
},
'& .MuiInputBase-input': {
color: '#7E7E7E'
}
background: 'transparent !important',
'& .MuiInputBase-input': { color: '#7E7E7E' },
'& .MuiInput-root': { borderBottom: 'none' },
'& .MuiInputBase-root': { height: '100%' }
}}
placeholder="جستجوی تخصص"
dir='rtl'
className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
className={`!shadow-none !w-full !min-w-3 !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] lg:!min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
/>
<Button
className="!rounded-[4px] !ml-1 !min-w-[56px] !min-h-[56px] !gap-2.5 !p-4"
className="
!rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !min-w-fit
!w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px]
!h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px]
"
>
<SearchD />
</Button>
components/clinics/head/modal/index.js
+24 -5
View File
@@ -29,20 +29,35 @@ function ModalSearchCity() {
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const [selected, setSelected] = useState({
first: '',
second: ''
});
const updateData = (event, name) =>
setSelected({ ...selected, [name]: event.target.innerText })
return (
<>
{/* Button Modal */}
<Button
className="!border-none !min-w-[122px] !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
className="
!border-none !min-w-fit lg:!min-w-[122px] !bg-[#F8F8FF] !rounded-l-none
!py-[15px] !px-[6px] md:!py-[17px] md:!px-[5px] lg:!py-[20px] lg:!px-[8px]
"
onClick={handleOpen}
variant="contained"
color="secondary"
>
<div className="min-w-[20px] min-h-[20px]">
<div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px]">
<SettingD />
</div>
<p className="text-[#616161] text-[16px] font-medium mx-2">فیلترها</p>
<div className='min-w-[24px]'>
<p className="text-[#616161] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-medium mx-2">
{/* {selected.first && selected.second ?
`${selected.first} | ${selected.second}` : 'فیلترها'} */}
فیلترها
</p>
<div className='w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]'>
<ArrowBottomD />
</div>
</Button>
@@ -69,11 +84,15 @@ function ModalSearchCity() {
<p className="text-[#525252] mt-[32px] text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
<div className="flex flex-col mt-[44px] mb-[56px] justify-center items-center gap-10">
<AutoCompleteSelect
list={states}
updateData={updateData}
label='استان'
list={states}
name='first'
/>
<AutoCompleteSelect
updateData={updateData}
list={cities}
name='second'
label='شهر'
/>
</div>
components/clinics/index.js
+3 -1
View File
@@ -3,8 +3,10 @@ import List from "./list";
import SearchBar from "./head/SearchBar";
function ClinicsPage() {
return (
<div className="">
<div>
<HeadPageList
title='لیست کلینیک ها و درمانگاه های تخصصی'
detail='در قسمت زیر می توانید کلینیک مورد نظر خود را جستجو نمایید'
components/clinics/list/ItemClinic.js
+2 -2
View File
@@ -21,11 +21,11 @@ function ItemClinic({ data }) {
</div>
</div>
<div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
<div className="flex items-center justify-start gap-0.5">
<div className="flex items-start justify-start gap-0.5">
<LocationClinic />
<p className="text-[#7E7E7E] text-[12px] font-normal">{data.location}</p>
</div>
<div className="flex items-center justify-start gap-0.5">
<div className="flex items-start justify-start gap-0.5 ml-[64px]">
<ClockClinic />
<p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {data.hours_of_work}</p>
</div>
components/clinics/list/index.js
+1 -1
View File
@@ -12,7 +12,7 @@ function List() {
<Pageguide
list={listPage}
/>
<ul className="grid grid-cols-3 gap-x-[24px] gap-y-[40px] mt-6">
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px] gap-y-[40px] mt-6">
{clinics.map(item => (
<ItemClinic
data={item}
components/doctor/appointmentList/ItemAppointment.js
+18 -14
View File
@@ -1,29 +1,31 @@
import ArrowLeftD from '@/components/icons/ArrowLeftD'
import ClockTurn from '@/components/icons/ClockTurn'
import GreenCalendarTurn from '@/components/icons/GreenCalendarTurn'
import LocationTurn from '@/components/icons/LocationTurn'
import { Button } from '@mui/material'
import Image from 'next/image'
import React from 'react'
function ItemAppointment({ turn }) {
function ItemAppointment({ turn, doctor }) {
return (
<li
key={turn.id}
className='py-4 w-full px-6 bg-[#FFF] border border-solid border-[#EFEFEF] rounded-lg'
>
<p className='text-[#3B3B3B] text-[20px] font-bold'>نوبت دهی</p>
<div className='flex flex-col items-start justify-center mt-6 gap-6'>
<div className='flex items-center justify-start gap-1'>
<LocationTurn />
<p className='text-[#525252] text-[14px] font-normal'>آدرس: {turn.location}</p>
</div>
<div className='flex items-center justify-start gap-1'>
<ClockTurn />
<p className='text-[#525252] text-[14px] font-normal'>ساعت کاری: {turn.hours_of_work}</p>
<span className='block w-full h-px bg-[#EFEFEF] my-4'></span>
<div className='flex items-center justify-start gap-3'>
<Image
src={doctor.img}
width={56}
height={56}
alt='doctor'
/>
<div className='flex flex-col items-start justify-center gap-2'>
<p className='text-[#3B3B3B] text-[14px] font-bold'>{doctor.name}</p>
<p className="text-[#525252] text-[14px] font-medium">تخصص: {doctor.expertise}</p>
</div>
</div>
<div className='flex mt-6 items-center justify-between'>
<div className='flex items-center justify-start gap-1'>
<div className='flex mt-5 items-center justify-between'>
<div className='flex items-start justify-start gap-1'>
<GreenCalendarTurn />
<p className='text-[#05BA58] text-[12px] font-medium'>اولین نوبت آزاد: {turn.first_free_turn}</p>
</div>
@@ -32,7 +34,9 @@ function ItemAppointment({ turn }) {
className='!py-2 !px-6 gap-1'
>
دریافت نوبت
<ArrowLeftD />
<div className='w-[20px] h-[20px]'>
<ArrowLeftD />
</div>
</Button>
</div>
</li>
components/doctor/appointmentList/index.js
+29 -9
View File
@@ -1,16 +1,36 @@
import turns from '@/data/turns.json';
import ItemAppointment from './ItemAppointment';
import { Button } from '@mui/material';
import ArrowLeftD from '@/components/icons/ArrowLeftD';
function AppointmentList({ doctor }) {
const itemActive = turns[0];
function AppointmentList() {
return (
<ul className="w-[40%] flex flex-col justify-start items-center gap-8">
{turns.map(item => (
<ItemAppointment
turn={item}
key={item.id}
/>
))}
</ul>
<>
<ul className="hidden lg:flex w-[38%] flex-col justify-start items-center gap-8">
{turns.map(item => (
<ItemAppointment
turn={item}
key={item.id}
doctor={doctor}
/>
))}
</ul>
<div className='fixed lg:hidden bg-[#FFF] border-t border-transparent border-t-[#D7D7D7] border-solid bottom-0 right-0 w-full p-4 flex items-center justify-between'>
<p className='text-[#05BA58] text-[11px] font-normal'>اولین نوبت آزاد: {itemActive.first_free_turn}</p>
<Button
variant='contained'
className='!py-2 !px-4 gap-1 !text-[14px] !font-medium'
>
دریافت نوبت
<div className='w-[20px] h-[20px]'>
<ArrowLeftD />
</div>
</Button>
</div>
</>
)
}
components/doctor/detailDoctor/Link.js
+9 -7
View File
@@ -17,21 +17,23 @@ function Link() {
{listLink.map((item, idx) => (
<li
key={idx}
className="flex"
>
<a href={`#${item.link}`}>
<Button
onClick={() => setActiveId(idx)}
className={`
!text-[20px] !font-bold !mx-[56px] !py-px
${idx !== 0 && idx !== listLink.length - 1 ?
'relative before:absolute before:right-[-56px] before:top-0 before:h-full before:w-px before:bg-[#BABABA] after:absolute after:left-[-56px] after:top-0 after:h-full after:w-px after:bg-[#BABABA]'
: ''}
${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
`}
className={`!text-[20px] !font-bold !p-1
${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
`}
variant="text">
{item.name}
</Button>
</a>
{listLink.length > idx + 1 && (
<span
className="block bg-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px]"
></span>
)}
</li>
))}
</ul>
components/doctor/detailDoctor/cards/AboutDcotor.js
+1 -1
View File
@@ -8,7 +8,7 @@ function AboutDcotor({ doctor }) {
<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>
<ul className="flex items-center justify-start gap-4">
<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">
<span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
components/doctor/detailDoctor/index.js
+1 -1
View File
@@ -7,7 +7,7 @@ import LocationDoctor from "./cards/LocationDoctor"
function DetailDoctor({ doctor }) {
return (
<div className="w-[57%]">
<div className="w-full lg:w-[59%]">
<div className="hidden lg:flex">
<Share />
</div>
components/icons/SearchD.js
+1 -1
View File
@@ -1,6 +1,6 @@
function SearchD() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z" stroke="#FAFAFA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M22 22L20 20" stroke="#FAFAFA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
components/layout/header/index.js
+1 -1
View File
@@ -22,7 +22,7 @@ function Header({ name }) {
px-[8px] sm:px-[16px] md:px-[24px] lg:px-[32px] py-[4px] sm:py-[8px] md:py-[12px] lg:py-[16px] flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap
${isActive ? '!pr-0' : '!px-4'}
`}>
<div className="">
<div>
<BgGray
isActive={isActive}
setIsActive={setIsActive}
components/searchHead/SmSearch.js
+14 -9
View File
@@ -5,7 +5,9 @@ function SmSearch({ placeholder }) {
return (
<ButtonGroup
variant="contained"
className="!bg-[#FFF] !w-2/3 !mt-[15px] !rounded-lg !overflow-hidden flex items-center !h-[64px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
className="!bg-[#FFF] !w-full lg:!w-2/3 !mt-[15px] !rounded-lg !overflow-hidden
flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
!h-fit !p-1"
>
<TextField
variant="standard"
@@ -13,14 +15,13 @@ function SmSearch({ placeholder }) {
disableUnderline: true
}}
sx={{
'& .MuiInputBase-root': {
height: '100%'
},
'& .MuiInput-root': {
borderBottom: 'none',
},
background: 'transparent !important',
'& .MuiInputBase-root': { height: '100%' },
'& .MuiInput-root': { borderBottom: 'none', },
'& .MuiInputBase-input': {
color: '#7E7E7E'
background: 'transparent',
color: '#7E7E7E',
padding: '0'
}
}}
placeholder={placeholder}
@@ -28,7 +29,11 @@ function SmSearch({ placeholder }) {
className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
/>
<Button
className="!rounded-[4px] !ml-1 !w-[56px] !h-[56px] !gap-2.5 !p-4"
className="
!rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4
!w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px]
!h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px]
"
>
<SearchD />
</Button>
components/specialties/head/index.js
-15
View File
@@ -1,15 +0,0 @@
import SmSearch from "@/components/searchHead/SmSearch";
function Head() {
return (
<div className="bg-[#F6F7F9]">
<div className="padding-responsive pt-[195px] pb-[85px] flex flex-col items-center gap-[25px]">
<p className="text-[#3B3B3B] text-[24px] text-center font-bold">تخصص مورد نظر شما چیست؟</p>
<p className="text-[#3B3B3B] text-[16px] text-center font-normal">تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:</p>
<SmSearch placeholder='جستجوی تخصص' />
</div>
</div>
)
}
export default Head
components/specialties/index.js
+8 -2
View File
@@ -1,10 +1,16 @@
import Head from "./head"
import HeadPageList from "@/app/component/head"
import SmSearch from "../searchHead/SmSearch"
import List from "./list"
function SpecialtiesPage() {
return (
<div className="">
<Head />
<HeadPageList
title='تخصص مورد نظر شما چیست؟'
detail='تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:'
>
<SmSearch placeholder='جستجوی تخصص' />
</HeadPageList>
<List />
</div>
)
components/specialties/list/index.js
+2 -2
View File
@@ -8,9 +8,9 @@ function List() {
<div className='bg-[#FAFAFA]'>
<div className='flex items-center justify-center gap-[12px] pt-[24px] mb-[40px]'>
<MenuS />
<p className='text-[#3B3B3B] text-[24px] font-bold'>لیست تخصص ها</p>
<p className='text-[#3B3B3B] text-[16px] sm:text-[19px] md:text-[22px] lg:text-[24px] font-bold'>لیست تخصص ها</p>
</div>
<ul className="padding-responsive grid grid-cols-6 gap-x-[24px] gap-y-[40px]">
<ul className="padding-responsive grid grid-cols-2 sm:grid-cols-3 mg:grid-cols-4 lg:grid-cols-6 gap-x-[24px] gap-y-[40px]">
{specialties.map(speciality => (
<ItemSpecialties
data={speciality}
public/assets/images/bg-head-menu.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB