complete management account page

2024-08-08 13:02:26 +03:30
parent 65943cb1f3
commit 7dfe6f8b8c
15 changed files with 173 additions and 1 deletions
@@ -0,0 +1,30 @@
+import { Edit, Trash } from "iconsax-react"
+import { formatCartNumber } from "../../utility/cart"
+import { BankCartInterface } from "../../types"
+import { FC } from "react"
+
+type Props = {
+    item: BankCartInterface
+}
+
+export const BankCart: FC<Props> = ({ item }) => {
+    return (
+        <div className="w-full flex flex-col justify-between rounded-[40px] bg-auth-form p-[18px] cursor-pointer bank-bg bg-bank-mehr min-h-[226px]">
+            <div className="flex flex-row justify-between items-center">
+                <div className="flex flex-row gap-3 items-center">
+                    <img src={`/svgs/banks/icons/${item?.bankName}.svg`} alt={item?.bankName} />
+                    <p className="text-lg font-medium text-primary-text-color">بانک {item?.bankPersianName}</p>
+                </div>
+                <div className="flex flex-row gap-3 items-center">
+                    <Trash color="#777577" />
+                    <Edit color="#777577" />
+                </div>
+            </div>
+            <p className="font-medium text-2xl text-primary-text-color text-center" style={{ direction: "ltr" }}>{formatCartNumber(1234567891011121)}</p>
+            <div className="flex flex-row items-center justify-between">
+                <p className="text-sm text-secondary-text-color font-medium">{item?.cartOwner}</p>
+                <p className="font-medium text-lg text-primary-text-color">IR {item?.shabaNumber}</p>
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,14 @@
+import { Add } from "iconsax-react"
+
+export const CreateNewCart = () => {
+    return (
+        <div className="bg-auth-form w-full h-full flex items-center justify-center rounded-[40px] p-[18px] py-10 cursor-pointer min-h-[226px]">
+            <div className="flex flex-col gap-6 items-center">
+                <div className="size-16 rounded-full flex justify-center items-center bg-secondary-color">
+                    <Add color="#11212D" className="size-10" />
+                </div>
+                <p className="text-base font-medium text-primary-text-color">ایجاد حساب بانکی جدید</p>
+            </div>
+        </div>
+    )
+}
@@ -0,0 +1,14 @@
+import { BankCartInterface } from "../../types"
+import { bankCarts } from "../../utility/cart"
+import { BankCart } from "./bank-cart"
+import { CreateNewCart } from "./create-new-cart"
+
+export const ManagementBankAccounts = () => {
+   
+    return (
+        <div className="w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-6">
+            <CreateNewCart />
+            {bankCarts?.map((item: BankCartInterface) => <BankCart key={item?.id} item={item} />)}
+        </div>
+    )
+}