diff --git a/public/svgs/home/binary.svg b/public/svgs/dashboard/binary.svg similarity index 100% rename from public/svgs/home/binary.svg rename to public/svgs/dashboard/binary.svg diff --git a/public/svgs/dashboard/wallet.svg b/public/svgs/dashboard/wallet.svg new file mode 100644 index 0000000..34cf3a3 --- /dev/null +++ b/public/svgs/dashboard/wallet.svg @@ -0,0 +1,247 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/common/combo-box.tsx b/src/components/common/combo-box.tsx index 46104b8..295c1a0 100644 --- a/src/components/common/combo-box.tsx +++ b/src/components/common/combo-box.tsx @@ -12,9 +12,10 @@ const value = [ type Props = { field?: any + placeholder?: string } -export const ComboBox: FC = ({ field }) => { +export const ComboBox: FC = ({ field, placeholder }) => { const [query, setQuery] = useState('') const filteredValue = @@ -25,15 +26,16 @@ export const ComboBox: FC = ({ field }) => { }) return ( - setQuery('')}> + setQuery('')}>
person?.name} onChange={(event) => setQuery(event.target.value)} - ref={field.ref} - name={field.name} - onBlur={field.onBlur} + ref={field && field.ref} + name={field && field.name} + onBlur={field && field.onBlur} /> diff --git a/src/components/home/status-box-items.tsx b/src/components/common/status-box-items.tsx similarity index 57% rename from src/components/home/status-box-items.tsx rename to src/components/common/status-box-items.tsx index bc076be..03884cd 100644 --- a/src/components/home/status-box-items.tsx +++ b/src/components/common/status-box-items.tsx @@ -3,14 +3,26 @@ import { StatusBoxItemInterface } from "../../types" import { filterNumber } from "../../utility/status" type Props = { - item: StatusBoxItemInterface + item: StatusBoxItemInterface, + detail?: boolean } -export const StatusBoxItem: FC = ({ item }) => { +export const StatusBoxItem: FC = ({ item, detail = false }) => { return (
-
+ {detail ?
+
+ {item?.icon} +
+
+

قیمت لحظه ای

+
+

{filterNumber(55803)}

+

تومان

+
+
+
:
{item?.icon} -
+
}

{item?.title}

diff --git a/src/components/home/imei.tsx b/src/components/home/imei.tsx index a117645..4f19850 100644 --- a/src/components/home/imei.tsx +++ b/src/components/home/imei.tsx @@ -5,7 +5,7 @@ export const Imei = () => { return (
- binary + binary
diff --git a/src/components/home/status-box.tsx b/src/components/home/status-box.tsx index 9b5842f..8cfceba 100644 --- a/src/components/home/status-box.tsx +++ b/src/components/home/status-box.tsx @@ -1,6 +1,6 @@ import { StatusBoxItemInterface } from "../../types" import { statusBoxItems } from "../../utility/status" -import { StatusBoxItem } from "./status-box-items" +import { StatusBoxItem } from "../common/status-box-items" export const StatusBox = () => { diff --git a/src/components/wallet/status-box-wallet.tsx b/src/components/wallet/status-box-wallet.tsx new file mode 100644 index 0000000..f85eceb --- /dev/null +++ b/src/components/wallet/status-box-wallet.tsx @@ -0,0 +1,13 @@ +import { StatusBoxItemInterface } from "../../types" +import { statusBoxWalletItems } from "../../utility/status" +import { StatusBoxItem } from "../common/status-box-items" + +export const StatusBoxWallet = () => { + + + return ( +
+ {statusBoxWalletItems?.map((item: StatusBoxItemInterface) => )} +
+ ) +} \ No newline at end of file diff --git a/src/components/wallet/wallet-address.tsx b/src/components/wallet/wallet-address.tsx new file mode 100644 index 0000000..214158b --- /dev/null +++ b/src/components/wallet/wallet-address.tsx @@ -0,0 +1,30 @@ +import { Button } from "@headlessui/react" +import { ComboBox } from "../common/combo-box" +import { useState } from "react" + +export const WalletAddress = () => { + const [show, setSHow] = useState(false) + const handleShow = () => setSHow(prev => !prev) + return ( +
+
+ wallet +
+
+
+

ثبت درخواست برداشت از حساب

+ {!show && } +
+ {!show &&

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز +

} + {show &&

+ {`همکار گرامی + طبق درخواست قبلی، عملیات واریز مبلغ 765,975 تومان به حساب شما در حال اجراست. متاسفانه پیش از تکمیل درخواست، امکان شروع عملیات جدید برای شما وجود ندارد.`}

} +
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/wallet/wallet-page.tsx b/src/components/wallet/wallet-page.tsx new file mode 100644 index 0000000..4b4358a --- /dev/null +++ b/src/components/wallet/wallet-page.tsx @@ -0,0 +1,11 @@ +import { StatusBoxWallet } from "./status-box-wallet" +import { WalletAddress } from "./wallet-address" + +export const WalletPage = () => { + return ( +
+ + +
+ ) +} \ No newline at end of file diff --git a/src/pages/dashboard/wallet.tsx b/src/pages/dashboard/wallet.tsx new file mode 100644 index 0000000..9b3e1a5 --- /dev/null +++ b/src/pages/dashboard/wallet.tsx @@ -0,0 +1,7 @@ +import { WalletPage } from "../../components/wallet/wallet-page" + +export const Wallet = () => { + return ( + + ) +} \ No newline at end of file diff --git a/src/router/index.tsx b/src/router/index.tsx index 6e9e406..f9edd89 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -10,6 +10,7 @@ import { SendCode } from "../pages/auth/send-code"; 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"; export const router = createBrowserRouter([ @@ -25,6 +26,10 @@ export const router = createBrowserRouter([ path: "my-account", element: }, + { + path: "wallet", + element: + }, ] }, { diff --git a/src/types/index.ts b/src/types/index.ts index 783c46f..c2848b4 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -53,7 +53,8 @@ export interface StatusBoxItemInterface { name: string, title: string, icon: React.ReactNode, - value: number + value: number, + detail?: boolean } export interface MyAccountInterface { diff --git a/src/utility/status.tsx b/src/utility/status.tsx index 2552ae7..427b3e7 100644 --- a/src/utility/status.tsx +++ b/src/utility/status.tsx @@ -28,4 +28,20 @@ export const statusBoxItems: StatusBoxItemInterface[] | [] = [ }, ] +export const statusBoxWalletItems: StatusBoxItemInterface[] | [] = [ + { + name: "dollar", + title: "دارایی دلاری", + icon: , + value: 8, + detail: true + }, + { + name: "coin", + title: "دارایی از تمدید اشتراک", + icon: , + value: 300589 + }, +] + export const filterNumber = (value: number) => value?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") \ No newline at end of file