diff --git a/public/svgs/banks/icons/mehr.svg b/public/svgs/banks/icons/mehr.svg new file mode 100644 index 0000000..9d948ee --- /dev/null +++ b/public/svgs/banks/icons/mehr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/svgs/banks/icons/pasargad.svg b/public/svgs/banks/icons/pasargad.svg new file mode 100644 index 0000000..5293f9c --- /dev/null +++ b/public/svgs/banks/icons/pasargad.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/svgs/banks/icons/saderat.svg b/public/svgs/banks/icons/saderat.svg new file mode 100644 index 0000000..a7f2408 --- /dev/null +++ b/public/svgs/banks/icons/saderat.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/svgs/banks/mehr.svg b/public/svgs/banks/mehr.svg new file mode 100644 index 0000000..0252284 --- /dev/null +++ b/public/svgs/banks/mehr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/svgs/banks/pasargad.svg b/public/svgs/banks/pasargad.svg new file mode 100644 index 0000000..2543417 --- /dev/null +++ b/public/svgs/banks/pasargad.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/svgs/banks/saderat.svg b/public/svgs/banks/saderat.svg new file mode 100644 index 0000000..8972748 --- /dev/null +++ b/public/svgs/banks/saderat.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/management-bank-accounts/bank-cart.tsx b/src/components/management-bank-accounts/bank-cart.tsx new file mode 100644 index 0000000..9980bd4 --- /dev/null +++ b/src/components/management-bank-accounts/bank-cart.tsx @@ -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 = ({ item }) => { + return ( +
+
+
+ {item?.bankName} +

بانک {item?.bankPersianName}

+
+
+ + +
+
+

{formatCartNumber(1234567891011121)}

+
+

{item?.cartOwner}

+

IR {item?.shabaNumber}

+
+
+ ) +} \ No newline at end of file diff --git a/src/components/management-bank-accounts/create-new-cart.tsx b/src/components/management-bank-accounts/create-new-cart.tsx new file mode 100644 index 0000000..bb24fc3 --- /dev/null +++ b/src/components/management-bank-accounts/create-new-cart.tsx @@ -0,0 +1,14 @@ +import { Add } from "iconsax-react" + +export const CreateNewCart = () => { + return ( +
+
+
+ +
+

ایجاد حساب بانکی جدید

+
+
+ ) +} \ No newline at end of file diff --git a/src/components/management-bank-accounts/index.tsx b/src/components/management-bank-accounts/index.tsx new file mode 100644 index 0000000..7b2090d --- /dev/null +++ b/src/components/management-bank-accounts/index.tsx @@ -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 ( +
+ + {bankCarts?.map((item: BankCartInterface) => )} +
+ ) +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 9132a13..3979c14 100644 --- a/src/index.css +++ b/src/index.css @@ -12,6 +12,7 @@ src: url("../public/fonts/VazirEn.woff") format('woff'); } + @layer base { html { font-family: 'vazirmatn', 'vaziren'; @@ -57,4 +58,8 @@ .otp-container { @apply min-w-max } + + .bank-bg { + @apply bg-contain bg-center bg-no-repeat + } } \ No newline at end of file diff --git a/src/pages/dashboard/management-bank-account.tsx b/src/pages/dashboard/management-bank-account.tsx new file mode 100644 index 0000000..55026e0 --- /dev/null +++ b/src/pages/dashboard/management-bank-account.tsx @@ -0,0 +1,7 @@ +import { ManagementBankAccounts } from "../../components/management-bank-accounts" + +export const ManagementBankAccountPage = () => { + return ( + + ) +} \ No newline at end of file diff --git a/src/router/index.tsx b/src/router/index.tsx index f9edd89..2fadac8 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -11,6 +11,7 @@ import { ResetPasswordCode } from "../pages/auth/reset-password-code"; import { DashboardLayout } from "../components/ui/dashboard/layout"; import { MyAcccount } from "../pages/dashboard/my-account"; import { Wallet } from "../pages/dashboard/wallet"; +import { ManagementBankAccountPage } from "../pages/dashboard/management-bank-account"; export const router = createBrowserRouter([ @@ -30,6 +31,10 @@ export const router = createBrowserRouter([ path: "wallet", element: }, + { + path: "management-bank-accounts", + element: + }, ] }, { diff --git a/src/types/index.ts b/src/types/index.ts index c2848b4..e6ec166 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -71,4 +71,16 @@ export interface MyAccountInterface { currentPassword: string, newPassword: string, repeatPassword: string +} + +type BankName = "saderat" | "mehr" | "pasargad" +type PersianBankName = "مهر" | "صادرات" | "پاسارگاد" + +export interface BankCartInterface { + id: number, + bankName: BankName, + bankPersianName: PersianBankName, + cartNumber: number | string, + cartOwner: string, + shabaNumber: string, } \ No newline at end of file diff --git a/src/utility/cart.ts b/src/utility/cart.ts new file mode 100644 index 0000000..b4e10e2 --- /dev/null +++ b/src/utility/cart.ts @@ -0,0 +1,32 @@ +import { BankCartInterface } from "../types"; + +export const formatCartNumber = (num: number | string) => { + return num.toString().replace(/\B(?=(\d{4})+(?!\d))/g, `          `); +} + +export const bankCarts: BankCartInterface[] | [] = [ + { + id: 0, + bankName: 'mehr', + bankPersianName: "مهر", + cartNumber: 4682563898563372, + cartOwner: "علی مصلحی", + shabaNumber: "270700001000116102861001" + }, + { + id: 1, + bankName: 'saderat', + bankPersianName: "صادرات", + cartNumber: 4682563898563372, + cartOwner: "علی مصلحی", + shabaNumber: "270700001000116102861001" + }, + { + id: 2, + bankName: 'pasargad', + bankPersianName: "پاسارگاد", + cartNumber: 4682563898563372, + cartOwner: "علی مصلحی", + shabaNumber: "270700001000116102861001" + }, +] \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index a4939ef..d29de98 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,7 +11,12 @@ module.exports = { "secondary-text-color": "#777577", "primary-color": "#015699", "secondary-color": "#E6E8EA" - } + }, + backgroundImage: { + 'bank-mehr': "url('/public/svgs/banks/mehr.svg')", + 'bank-pasargad': "url('/public/svgs/banks/pasargad.svg')", + 'bank-saderat': "url('/public/svgs/banks/saderat.svg')", + }, }, }, plugins: [],