respnsive pages
This commit is contained in:
Ehsan
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user