change design all page & component page booking and account & cleancode
This commit is contained in:
Ehsan
@@ -1,23 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
function Address({ doctor }) {
|
||||
return (
|
||||
<ul className='hidden mt-[4px] lg:flex flex-col'>
|
||||
{doctor.address.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
>
|
||||
<div className='flex py-[12px] text-[#616161] text-[14px] items-start justify-start'>
|
||||
<p className='font-bold min-w-[115px]'>{`${item.name}: `}</p>
|
||||
<p className='font-normal'>{item.location}</p>
|
||||
</div>
|
||||
{doctor.address.length > idx + 1 && (
|
||||
<span className='bg-[#EFEFEF] block h-px w-full'></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
export default Address
|
||||
@@ -0,0 +1,17 @@
|
||||
function Content({ isConfirmed, children, title }) {
|
||||
return (
|
||||
<div className='flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]'>
|
||||
<div className='flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]'>
|
||||
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
|
||||
{isConfirmed && (
|
||||
<p
|
||||
className='py-[4px] md:py-[2px] leading-[8px] sm:leading-[14px] md:leading-[21px] lg:leading-[28px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[10px] md:text-[12px] font-normal'
|
||||
>تایید شده</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Content
|
||||
@@ -0,0 +1,42 @@
|
||||
import EditOrangeA from "@/components/icons/EditOrangeA"
|
||||
import { Button, TextField } from "@mui/material"
|
||||
|
||||
function EditField({ changeData, data, name }) {
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<TextField
|
||||
value={data?.value}
|
||||
disabled={!data?.isEdit}
|
||||
type='text'
|
||||
className="!bg-[#FFF] !w-full res-field-account"
|
||||
onChange={e => {
|
||||
changeData(e.target.value, 'value', name)
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiFormLabel-root': {
|
||||
top: '-4px !important'
|
||||
},
|
||||
'& .MuiInputBase-input': { padding: '12.5px 14px' },
|
||||
'& .MuiInputBase-root': { borderRadius: '6px !important' },
|
||||
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
|
||||
".Mui-focused": {
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: '1px solid #5559CE !important',
|
||||
transition: '0.5s all'
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1"
|
||||
onClick={() => {
|
||||
changeData(!data.isEdit, 'isEdit', name)
|
||||
}}
|
||||
>
|
||||
<EditOrangeA />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditField
|
||||
@@ -0,0 +1,36 @@
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import EditField from "./EditField";
|
||||
import Content from "./Content";
|
||||
|
||||
const bime = [
|
||||
{ label: 'بیمه 1', id: 10 },
|
||||
{ label: 'بیمه 2', id: 20 },
|
||||
{ label: 'بیمه 3', id: 30 }
|
||||
];
|
||||
|
||||
function Form({ changeData, data, updateSelect, isForAnother }) {
|
||||
return (
|
||||
<div className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start
|
||||
justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2">
|
||||
<Content title='شماره موبایل' isConfirmed={isForAnother ? false : true}>
|
||||
<EditField changeData={changeData} data={data?.phone} name='phone' />
|
||||
</Content>
|
||||
<Content title='کد ملی'>
|
||||
<EditField changeData={changeData} data={data?.codemeli} name='codemeli' />
|
||||
</Content>
|
||||
<Content title='نام و نام خانوادگی'>
|
||||
<EditField changeData={changeData} data={data?.name} name='name' />
|
||||
</Content>
|
||||
<Content title='نوع بیمه'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='نوع بیمه'
|
||||
name='first'
|
||||
list={bime}
|
||||
/>
|
||||
</Content>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Form
|
||||
@@ -1,25 +0,0 @@
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
|
||||
function Head({ doctor }) {
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[12px]">
|
||||
<Image
|
||||
className='
|
||||
w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
|
||||
h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
|
||||
'
|
||||
src={doctor.img}
|
||||
alt="profile"
|
||||
height={56}
|
||||
width={56}
|
||||
/>
|
||||
<div className="flex flex-col items-start justify-start gap-[8px]">
|
||||
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">{doctor.name}</p>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] font-medium">تخصص: {doctor.expertise}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Head
|
||||
@@ -1,16 +1,74 @@
|
||||
import Address from "./Address";
|
||||
import Head from "./Head";
|
||||
import { useState } from "react";
|
||||
import { Button } from "@mui/material";
|
||||
import AddCircleBlueA from "@/components/icons/AddCircleBlueA";
|
||||
import ArrowLeftB from "@/components/icons/ArrowLeftB";
|
||||
import ButtonFixed from "../paying/ButtonFixed";
|
||||
import Form from "./Form";
|
||||
|
||||
function Detail({ isForAnother, setStep, setIsForAnother, data, setData, fadeElement, setIsPay }) {
|
||||
|
||||
const [selected, setSelected] = useState({
|
||||
first: '',
|
||||
second: ''
|
||||
});
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value
|
||||
}
|
||||
});
|
||||
|
||||
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
|
||||
|
||||
function Detail({ doctor }) {
|
||||
return (
|
||||
<div className="h-fit lg:h-screen w-full lg:w-[39%]">
|
||||
// ${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}
|
||||
<div className="w-full lg:w-[59%]">
|
||||
<div
|
||||
className="p-0 lg:p-[16px] sticky rounded-[8px] bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
|
||||
top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]"
|
||||
className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF]
|
||||
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]
|
||||
`}
|
||||
>
|
||||
<Head doctor={doctor} />
|
||||
<span className="block w-full bg-[#EFEFEF] h-px my-[16px]"></span>
|
||||
<Address doctor={doctor} />
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">
|
||||
{isForAnother ? 'اطلاعات کاربر جدید' : 'اطلاعات حساب کاربری'}
|
||||
</p>
|
||||
<Form
|
||||
isForAnother={isForAnother}
|
||||
updateSelect={updateSelect}
|
||||
changeData={changeData}
|
||||
data={data}
|
||||
/>
|
||||
{!isForAnother && (
|
||||
<Button
|
||||
className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
|
||||
onClick={() => {
|
||||
setIsForAnother(true)
|
||||
setData({
|
||||
phone: { value: '09121056987', isEdit: false },
|
||||
codemeli: { value: '1741025645', isEdit: false },
|
||||
name: { value: 'ساغر صابری نژاد', isEdit: false }
|
||||
});
|
||||
}}
|
||||
>
|
||||
<AddCircleBlueA />
|
||||
<p className="text-[#5559CE] text-[16px] font-medium">دریافت نوبت برای فرد دیگر </p>
|
||||
</Button>
|
||||
)}
|
||||
<ButtonFixed>
|
||||
<Button
|
||||
className={`
|
||||
!flex !w-full md:!w-fit
|
||||
!gap-[4px] md:!mr-auto !px-[12px] !py-[8px] md:!py-[9px] !min-w-[150px]
|
||||
${isForAnother ? '!mt-0 md:!mt-[40px]' : '!mt-0 md:!mt-[32px]'}`}
|
||||
variant="contained"
|
||||
onClick={() => setStep(prev => prev + 1)}
|
||||
>
|
||||
<p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
|
||||
<ArrowLeftB />
|
||||
</Button>
|
||||
</ButtonFixed>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user