95 lines
4.1 KiB
JavaScript
95 lines
4.1 KiB
JavaScript
'use client';
|
|
|
|
import { useState } from "react";
|
|
|
|
import ContentText from "../../ContentText";
|
|
import EditField from "@/app/component/EditField";
|
|
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
|
import { bank, city, state } from "./listSelector";
|
|
import AddLocationP from "@/components/icons/AddLocationP";
|
|
import { Button } from "@mui/material";
|
|
import ArrowLeftButtonP from "@/components/icons/ArrowLeftButtonP";
|
|
|
|
function Form() {
|
|
|
|
const [data, setData] = useState({
|
|
name: { value: 'احسان احمدی', isEdit: false },
|
|
national_code: { value: '123456789', isEdit: false },
|
|
address: { value: '', isEdit: false },
|
|
phone: { value: '', isEdit: false },
|
|
account_number: { value: '', isEdit: false },
|
|
});
|
|
const [selected, setSelected] = useState({
|
|
state: '',
|
|
city: '',
|
|
bank: ''
|
|
});
|
|
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
|
|
|
|
const changeData = (value, type, name) =>
|
|
setData({
|
|
...data,
|
|
[name]: {
|
|
...data[name],
|
|
[type]: value
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className="flex flex-col items-start justify-start gap-[32px] md:gap-[40px] lg:gap-[48px]">
|
|
<ul className="grid w-full grid-cols-1 md:grid-cols-2 mt-[24px] md:mt-[28px] lg:mt-[32px] gap-x-[48px] gap-y-[24px] md:gap-y-[28px] lg:gap-y-[32px]">
|
|
<ContentText text='نام و نام خانوادگی'>
|
|
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
|
|
</ContentText>
|
|
<ContentText text='کد ملی'>
|
|
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.national_code} name='national_code' />
|
|
</ContentText>
|
|
<ContentText text='استان'>
|
|
<AutoCompleteSelect
|
|
updateData={updateSelect}
|
|
label='انتخاب کنید...'
|
|
name='state'
|
|
list={state}
|
|
/>
|
|
</ContentText>
|
|
<ContentText text='شهر'>
|
|
<AutoCompleteSelect
|
|
updateData={updateSelect}
|
|
label='انتخاب کنید...'
|
|
name='city'
|
|
list={city}
|
|
/>
|
|
</ContentText>
|
|
<ContentText text='آدرس'>
|
|
<EditField icon={<AddLocationP />} isTransparent={true} placeholder='از روی نقشه انتخاب کنید...' iconGray={true} changeData={changeData} data={data?.address} name='address' />
|
|
</ContentText>
|
|
<ContentText text='شماره موبایل'>
|
|
<EditField isTransparent={true} placeholder='شماره موبایل' iconGray={true} changeData={changeData} data={data?.phone} name='phone' />
|
|
</ContentText>
|
|
<ContentText text='شماره حساب'>
|
|
<EditField isTransparent={true} placeholder='شماره حساب' iconGray={true} changeData={changeData} data={data?.account_number} name='account_number' />
|
|
</ContentText>
|
|
<ContentText text='شهر'>
|
|
<AutoCompleteSelect
|
|
updateData={updateSelect}
|
|
label='انتخاب کنید...'
|
|
name='bank'
|
|
list={bank}
|
|
/>
|
|
</ContentText>
|
|
</ul>
|
|
<div className="w-full flex justify-end">
|
|
<Button
|
|
variant="contained"
|
|
className="!gap-[4px] !py-[8px] !px-[24px] !rounded-[4px] !w-full md:!w-fit
|
|
!shadow-none !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
|
|
>
|
|
ثبت اطلاعات
|
|
<ArrowLeftButtonP />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Form |