+ {props.errorText}
+
+ )
+}
+
+export default Error
\ No newline at end of file
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..8822f29
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,115 @@
+import { FC, InputHTMLAttributes, useEffect, useState } from 'react'
+import { clx } from '../helpers/utils';
+import { Eye, SearchNormal } from 'iconsax-react';
+import Error from './Error';
+
+type Variant = "floating_outlined" | "primary" | "search";
+
+type Props = {
+ label?: string;
+ className?: string;
+ variant?: Variant;
+ error_text?: string;
+ onEnter?: () => void;
+ unit?: string;
+ seprator?: boolean;
+ isNotRequired?: boolean;
+ onChangeSearchFinal?: (value: string) => void;
+} & InputHTMLAttributes
+
+
+
+ )
+}
+
+export default Input
\ No newline at end of file
diff --git a/src/helpers/types.ts b/src/helpers/types.ts
new file mode 100644
index 0000000..d8f7039
--- /dev/null
+++ b/src/helpers/types.ts
@@ -0,0 +1,20 @@
+type Without
+ {
+ setSearch(e.target.value)
+ handleInputChange(e)
+ }} value={props.seprator ? formattedValue : props.value} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />
+
+ {
+ props.type === 'password' &&
+ setShowPassword((oldValue) => !oldValue)} size={20} color='#8C90A3' className='absolute top-0 bottom-0 cursor-pointer my-auto left-3' />
+ // ![]()
setShowPassword((oldValue) => !oldValue)} src={EyeIcon} className='w-5 absolute top-0 bottom-0 cursor-pointer my-auto left-3' />
+ }
+
+ {
+ props.variant === 'search' &&
+
+ home page
+ )
+}
+
+export default Home
\ No newline at end of file
diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
new file mode 100644
index 0000000..7a8f403
--- /dev/null
+++ b/src/router/AppRouter.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react'
+import { Routes, Route } from 'react-router-dom'
+import Home from '@/pages/home/Home'
+
+const AppRouter: FC = () => {
+ return (
+
+
+
+ )
+}
+
+export default Footer
diff --git a/src/shared/Header.tsx b/src/shared/Header.tsx
new file mode 100644
index 0000000..82f6e3f
--- /dev/null
+++ b/src/shared/Header.tsx
@@ -0,0 +1,173 @@
+import { FC, useEffect, useState } from 'react'
+import Input from '../components/Input'
+import { Element3, HambergerMenu, Wallet } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import { Link, useLocation } from 'react-router-dom'
+import { Paths } from '@/utils/Paths'
+// import Notifications from '../pages/notification/Notification'
+import { useSharedStore } from './store/sharedStore'
+// import { useGetProfile } from '../pages/profile/hooks/useProfileData'
+// import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+// import { useGetWalletBalance } from '../pages/wallet/hooks/useWalletData'
+// import { NumberFormat } from '../config/func'
+
+const Header: FC = () => {
+
+ const location = useLocation();
+ const [popoverKey, setPopoverKey] = useState(0);
+ const { t } = useTranslation('global')
+ const { setOpenSidebar, openSidebar } = useSharedStore()
+ // const { data } = useGetProfile()
+ // const getWalletBalance = useGetWalletBalance()
+
+ console.log(popoverKey);
+ useEffect(() => {
+
+ setPopoverKey((prevKey) => prevKey + 1);
+ }, [location.pathname]);
+
+ return (
+
+
+
+
+
+
+
+
+ {t('footer.my_services')}
+
+
+
+
+
+
+ {t('footer.other_services')}
+
+
+
+
+
+
+
+
+
+
+ {t('footer.home')}
+
+
+
+
+
+
+ {t('footer.announcements')}
+
+
+
+
+
+ {t('footer.tickets')}
+
+
+
+ 
*/}
+
+ )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/shared/Main.tsx b/src/shared/Main.tsx
new file mode 100644
index 0000000..dfd43bd
--- /dev/null
+++ b/src/shared/Main.tsx
@@ -0,0 +1,15 @@
+import { FC } from 'react'
+import SideBar from './SideBar'
+import Header from './Header'
+
+const Main: FC = () => {
+ return (
+
+
+
+ setOpenSidebar(!openSidebar)} className='xl:hidden block'>
+
+ {/*
+
+
+
+
+
+
+
+
+ )
+ } */}
+
+
+
+
+ {/*
+ {/* {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')} */}
+
+
+
+
+
+
+ 
+
+
+
+
+ {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
+
+
+ setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
+
+
+
+
+
+
+
+ {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
+
+
+
+ {data?.data?.user?.email}
+
+
+
+
+
+
+
+
+
+
+
+ {t('home.balance')}
+
+ {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')}
+
+
+
+
+
+
+ )
+}
+
+export default Main
\ No newline at end of file
diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
new file mode 100644
index 0000000..b605492
--- /dev/null
+++ b/src/shared/SideBar.tsx
@@ -0,0 +1,135 @@
+import { FC } from 'react'
+import LogoImage from '../assets/images/logo.svg'
+import { Add, ArchiveTick, DirectInbox, DirectSend, Edit, InfoCircle, Logout, Setting2, Star, Trash } from 'iconsax-react'
+import SideBarItem from './SideBarItem'
+import { useLocation } from 'react-router-dom'
+import { useSharedStore } from './store/sharedStore'
+import { clx } from '../helpers/utils'
+import { useTranslation } from 'react-i18next'
+import { Paths } from '@/utils/Paths'
+import Button from '@/components/Button'
+
+const SideBar: FC = () => {
+
+ const { t } = useTranslation()
+ const { openSidebar, setOpenSidebar } = useSharedStore()
+ const location = useLocation()
+
+ const isActive = (path: string) => location.pathname === path
+
+ const iconSizeSideBar = 20
+
+ return (
+ <>
+ {
+ openSidebar && setOpenSidebar(false)} />
+ }
+ = (props: Props) => {
+
+ const handleLogout = async () => {
+ // await logout.mutateAsync()
+ // removeToken()
+ // removeRefreshToken()
+ // window.location.href = Pages.auth.login
+ }
+
+ return (
+
+ {
+ !props.isWithoutLine &&
+
+ }
+ ((set) => ({
+ openSidebar: false,
+ setOpenSidebar: (value) => set({ openSidebar: value }),
+}));
diff --git a/src/shared/types/SharedTypes.ts b/src/shared/types/SharedTypes.ts
new file mode 100644
index 0000000..b681e51
--- /dev/null
+++ b/src/shared/types/SharedTypes.ts
@@ -0,0 +1,4 @@
+export type SharedStoreType = {
+ openSidebar: boolean;
+ setOpenSidebar: (value: boolean) => void;
+};
diff --git a/src/utils/Paths.ts b/src/utils/Paths.ts
new file mode 100644
index 0000000..63676d1
--- /dev/null
+++ b/src/utils/Paths.ts
@@ -0,0 +1,11 @@
+export const Paths = {
+ home: "/",
+ received: "/received",
+ sent: "/sent",
+ draft: "/draft",
+ archive: "/archive",
+ trash: "/trash",
+ favorite: "/favorite",
+ spam: "/spam",
+ setting: "/setting",
+};
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 358ca9b..111a4d8 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -3,10 +3,13 @@
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "lib": [
+ "ES2020",
+ "DOM",
+ "DOM.Iterable"
+ ],
"module": "ESNext",
"skipLibCheck": true,
-
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
@@ -14,13 +17,20 @@
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
-
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
- "noUncheckedSideEffectImports": true
+ "noUncheckedSideEffectImports": true,
+ "baseUrl": "./",
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ }
},
- "include": ["src"]
-}
+ "include": [
+ "src"
+ ]
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 1ffef60..8eacc65 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,19 @@
{
"files": [],
"references": [
- { "path": "./tsconfig.app.json" },
- { "path": "./tsconfig.node.json" }
- ]
-}
+ {
+ "path": "./tsconfig.app.json"
+ },
+ {
+ "path": "./tsconfig.node.json"
+ }
+ ],
+ "compilerOptions": {
+ "baseUrl": "./",
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ }
+ }
+}
\ No newline at end of file
diff --git a/tsconfig.node.json b/tsconfig.node.json
index db0becc..275f6e2 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -2,23 +2,31 @@
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
- "lib": ["ES2023"],
+ "lib": [
+ "ES2023"
+ ],
"module": "ESNext",
"skipLibCheck": true,
-
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
-
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
- "noUncheckedSideEffectImports": true
+ "noUncheckedSideEffectImports": true,
+ "baseUrl": "./",
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ }
},
- "include": ["vite.config.ts"]
-}
+ "include": [
+ "vite.config.ts"
+ ]
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 4ff4f8f..1cbd71f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,9 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
+import tsconfigPaths from "vite-tsconfig-paths";
// https://vite.dev/config/
export default defineConfig({
- plugins: [react(), tailwindcss()],
+ plugins: [react(), tailwindcss(), tsconfigPaths()],
});
+
+
+ )
+}
+
+export default SideBar
\ No newline at end of file
diff --git a/src/shared/SideBarItem.tsx b/src/shared/SideBarItem.tsx
new file mode 100644
index 0000000..49dab92
--- /dev/null
+++ b/src/shared/SideBarItem.tsx
@@ -0,0 +1,43 @@
+import { FC, ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+import { clx } from '../helpers/utils'
+
+type Props = {
+ icon: ReactNode,
+ title: string,
+ isActive: boolean,
+ link: string,
+ isLogout?: boolean,
+ isWithoutLine?: boolean
+}
+
+const SideBarItem: FC
+
+
+
+
+
+
+
+
+
+
+ {t('sidebar.menu')}
+
+
+
+
+
+
+ {t('sidebar.other')}
+
+
+
+
+
+
+
+
+
+
+
+
+ {props.icon}
+
+
+
+ )
+}
+
+export default SideBarItem
\ No newline at end of file
diff --git a/src/shared/store/sharedStore.ts b/src/shared/store/sharedStore.ts
new file mode 100644
index 0000000..731c65a
--- /dev/null
+++ b/src/shared/store/sharedStore.ts
@@ -0,0 +1,7 @@
+import { create } from "zustand";
+import { SharedStoreType } from "../types/SharedTypes";
+
+export const useSharedStore = create
+ {props.title}
+
+