add prettier formatter to all file
This commit is contained in:
Ehsan
@@ -3,20 +3,20 @@ import ProfileP from "@/components/icons/ProfileP";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function Head() {
|
||||
return (
|
||||
<div className="flex items-center justify-center md:justify-start gap-[10px]">
|
||||
<div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
|
||||
<ProfileP />
|
||||
</div>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!flex !p-1 !text-[#525252] !text-[14px] md:!text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
|
||||
>
|
||||
انتخاب تصویر
|
||||
<ArrowLeftPU />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex items-center justify-center md:justify-start gap-[10px]">
|
||||
<div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
|
||||
<ProfileP />
|
||||
</div>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!flex !p-1 !text-[#525252] !text-[14px] md:!text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
|
||||
>
|
||||
انتخاب تصویر
|
||||
<ArrowLeftPU />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
@@ -11,85 +11,119 @@ 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 [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 changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value,
|
||||
},
|
||||
});
|
||||
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
|
||||
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>
|
||||
)
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftButtonP />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Form
|
||||
export default Form;
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
export const state = [
|
||||
{ label: 'استان 1', id: 10 },
|
||||
{ label: 'استان 2', id: 20 },
|
||||
{ label: 'استان 3', id: 30 },
|
||||
{ label: 'استان 4', id: 40 }
|
||||
{ label: "استان 1", id: 10 },
|
||||
{ label: "استان 2", id: 20 },
|
||||
{ label: "استان 3", id: 30 },
|
||||
{ label: "استان 4", id: 40 },
|
||||
];
|
||||
|
||||
export const city = [
|
||||
{ label: 'شهر 1', id: 10 },
|
||||
{ label: 'شهر 2', id: 20 },
|
||||
{ label: 'شهر 3', id: 30 },
|
||||
{ label: 'شهر 4', id: 40 }
|
||||
{ label: "شهر 1", id: 10 },
|
||||
{ label: "شهر 2", id: 20 },
|
||||
{ label: "شهر 3", id: 30 },
|
||||
{ label: "شهر 4", id: 40 },
|
||||
];
|
||||
|
||||
export const bank = [
|
||||
{ label: 'بانک 1', id: 10 },
|
||||
{ label: 'بانک 2', id: 20 },
|
||||
{ label: 'بانک 3', id: 30 },
|
||||
{ label: 'بانک 4', id: 40 }
|
||||
];
|
||||
{ label: "بانک 1", id: 10 },
|
||||
{ label: "بانک 2", id: 20 },
|
||||
{ label: "بانک 3", id: 30 },
|
||||
{ label: "بانک 4", id: 40 },
|
||||
];
|
||||
|
||||
@@ -2,16 +2,18 @@ import Form from "./form";
|
||||
import Head from "./Head";
|
||||
|
||||
function UserAccountPage({ data }) {
|
||||
return (
|
||||
<div className="
|
||||
return (
|
||||
<div
|
||||
className="
|
||||
opacity-page rounded-[8px] bg-transparent md:bg-[#FFF]
|
||||
shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] py-0 md:py-[16px] lg:py-[32px]
|
||||
px-0 sm:px-[14px] md:px-[24px] lg:px-[44px] xl:px-[112px]
|
||||
">
|
||||
<Head />
|
||||
<Form />
|
||||
</div>
|
||||
)
|
||||
"
|
||||
>
|
||||
<Head />
|
||||
<Form />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserAccountPage
|
||||
export default UserAccountPage;
|
||||
|
||||
Reference in New Issue
Block a user