130 lines
4.0 KiB
JavaScript
130 lines
4.0 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;
|