update design page doctor item & design page account & success and failed pay

This commit is contained in:
Ehsan
2024-08-28 03:14:42 +03:30
parent 7925493681
commit 6384dd10b6
20 changed files with 1106 additions and 56 deletions
@@ -6,7 +6,7 @@ function AboutDcotor({ 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">
<div className="mt-2 mb-8">
<p className="text-[#525252] text-[16px] font-bold">تخصص ها</p>
<ul className="flex flex-wrap gap-y-1 items-center justify-start gap-4">
{doctor.specialties.map((item, idx) => (
@@ -1,26 +0,0 @@
function LocationDoctor({ doctor }) {
return (
<div>
<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">
<p className="text-[#525252] text-[16px] font-normal">آدرس: {doctor.location}</p>
<p className="text-[#525252] text-[16px] font-normal">تلفن: {doctor.phone}</p>
<p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {doctor.hours_of_work}</p>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12959.6445083469!2d51.33890241984384!3d35.70380456224644!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8dfe05732c2e91%3A0xfcbec017befd15f4!2sAzadi%20Tower!5e0!3m2!1sen!2snl!4v1700601294504!5m2!1sen!2snl"
className='w-full h-[470px] rounded-lg my-4'
allowFullScreen=""
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
></iframe>
</div>
)
}
export default LocationDoctor
@@ -4,7 +4,7 @@ import Comment from '@/app/component/comment'
function Comments({ doctor }) {
return (
<div className='mt-4'>
<div className='mt-8'>
<a
id="comments"
className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
@@ -0,0 +1,58 @@
'use client';
import { useState } from 'react';
import { Button } from '@mui/material';
import ArrowBottomGrayD from '@/components/icons/ArrowBottomGrayD';
function Item({ data }) {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<a
id="location"
className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
></a>
<Button
variant='texts'
onClick={() => setIsOpen(!isOpen)}
className="!px-[2px] !py-[4px] !flex !items-center !justify-between !w-full"
>
<p className="text-[#616161] text-[16px] font-medium">{data.title}</p>
<div
className={`
transition-all duration-500
${isOpen ?
'rotate-180' :
'rotate-0'}
`}
>
<ArrowBottomGrayD />
</div>
</Button>
<div
className={`
overflow-hidden transition-all duration-500
${isOpen ?
'max-h-screen ' :
'max-h-0'}
`}
>
<div className="gap-4 flex flex-col items-start mt-[24px]">
<p className="text-[#525252] text-[16px] font-normal">آدرس: {data.address}</p>
<p className="text-[#525252] text-[16px] font-normal">تلفن: {data.phone}</p>
<p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {data.working_days}</p>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d99748.77423686371!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e1!3m2!1sen!2snl!4v1724802057795!5m2!1sen!2snl"
className='w-full h-[470px] rounded-lg mt-4'
allowFullScreen=""
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
></iframe>
</div>
</>
)
}
export default Item
@@ -0,0 +1,26 @@
import Item from "./Item"
function Locations({ doctor }) {
return (
<div>
<p
className="text-[#525252] text-[20px] font-bold"
>موقعیت مکانی </p>
<ul className="flex w-full mt-[24px] flex-col justify-center items-start">
{doctor.locations.map((item, idx) => (
<li className="w-full">
<Item
key={idx}
data={item}
/>
{doctor.locations.length > idx + 1 && (
<span className="w-full h-px bg-[#EFEFEF] block my-[16px]"></span>
)}
</li>
))}
</ul>
</div>
)
}
export default Locations
+2 -2
View File
@@ -3,7 +3,7 @@ import Share from "./Share"
import Title from "./Title"
import AboutDcotor from "./cards/AboutDcotor"
import Comments from "./cards/comments"
import LocationDoctor from "./cards/LocationDoctor"
import Locations from "./cards/locations"
function DetailDoctor({ doctor }) {
return (
@@ -14,7 +14,7 @@ function DetailDoctor({ doctor }) {
<Title doctor={doctor} />
<Link />
<AboutDcotor doctor={doctor} />
<LocationDoctor doctor={doctor} />
<Locations doctor={doctor} />
<Comments doctor={doctor} />
</div>
)