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
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>
</>
)
}