deisgn page account bank header

2024-10-09 20:20:03 +03:30
parent c1898eb654
commit 2a98790ffd
10 changed files with 150 additions and 7 deletions
@@ -0,0 +1,129 @@
+"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;
@@ -0,0 +1,20 @@
+export const state = [
+  { 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 },
+];
+
+export const bank = [
+  { label: "بانک 1", id: 10 },
+  { label: "بانک 2", id: 20 },
+  { label: "بانک 3", id: 30 },
+  { label: "بانک 4", id: 40 },
+];