diff --git a/src/assets/images/dashboard/bg_ellipse1.png b/src/assets/images/dashboard/bg_ellipse1.png new file mode 100644 index 0000000..1260349 Binary files /dev/null and b/src/assets/images/dashboard/bg_ellipse1.png differ diff --git a/src/assets/images/dashboard/bg_ellipse2.png b/src/assets/images/dashboard/bg_ellipse2.png new file mode 100644 index 0000000..a199b06 Binary files /dev/null and b/src/assets/images/dashboard/bg_ellipse2.png differ diff --git a/src/components/DashboardLayout/Aside.tsx b/src/components/DashboardLayout/Aside.tsx new file mode 100644 index 0000000..01ccbe3 --- /dev/null +++ b/src/components/DashboardLayout/Aside.tsx @@ -0,0 +1,50 @@ +import { Link, useLocation } from "react-router-dom"; + +import { Icons } from "../index"; + +export default function Aside() { + + const {pathname} = useLocation() + + return ( +
+
+

+ AC +

+
+
+ {asideLinks.map((link, index) => ( + + + {link.name} + + ))} +
+
+ +
+
+ ); +} + + +type AsideLinksType = { + name: string, + link: string, + icon: string, + nestedlink?:boolean +}[] +const asideLinks:AsideLinksType = [ + {name: 'Home', link: '/dashboard/home', icon: 'home'}, + {name: 'My Profile', link: '/dashboard/profile', icon: 'profile'}, + {name: 'Verification', link: '/dashboard/verification', icon: 'verification'}, + {name: 'Payments', link: '/dashboard/payments', icon: 'payments'}, + {name: 'Legals', link: '/dashboard/legals', icon: 'legals'}, +] diff --git a/src/components/DashboardLayout/DashboardAuth.tsx b/src/components/DashboardLayout/DashboardAuth.tsx new file mode 100644 index 0000000..fd9a548 --- /dev/null +++ b/src/components/DashboardLayout/DashboardAuth.tsx @@ -0,0 +1,10 @@ +import DashboardLayout from "./DashboardLayout"; +import { Outlet } from "react-router-dom"; + +export default function DashboardAuth() { + return ( + + + + ) +} \ No newline at end of file diff --git a/src/components/DashboardLayout/DashboardLayout.tsx b/src/components/DashboardLayout/DashboardLayout.tsx new file mode 100644 index 0000000..12ecf15 --- /dev/null +++ b/src/components/DashboardLayout/DashboardLayout.tsx @@ -0,0 +1,94 @@ +import { ReactNode, useState, useEffect } from 'react' +import { Link } from 'react-router-dom' +import Aside from './Aside' + +export default function DashboardLayout({children}:{children: ReactNode}) { + + const [showAside, setShowAside] = useState(false) + + let [widthSize, setWidthSize] = useState('') + + + const AsideDisplay = () => { + setShowAside(prev => !prev) + } + + useEffect(() => { + const screenResized = window.addEventListener('resize', ()=>{ + setShowAside(false) + setWidthSize(window.innerWidth) + }) + + return () => { + window.removeEventListener('resize', screenResized) + } + }, []) + + + return ( +
+
+ ) +} + diff --git a/src/components/DashboardLayout/index.tsx b/src/components/DashboardLayout/index.tsx new file mode 100644 index 0000000..cf40d1a --- /dev/null +++ b/src/components/DashboardLayout/index.tsx @@ -0,0 +1,3 @@ +import DashboardAuth from "./DashboardAuth"; + +export { DashboardAuth }; \ No newline at end of file diff --git a/src/components/Icons/Icons.tsx b/src/components/Icons/Icons.tsx new file mode 100644 index 0000000..b86a47e --- /dev/null +++ b/src/components/Icons/Icons.tsx @@ -0,0 +1,37 @@ +type Props = { + name:string, + fillColor?:string +} + +export default function Icons({name, fillColor}:Props) { + return ( + <> + {name == 'home' ? + + + + + :name == 'profile'? + + + + + :name == 'verification'? + + + + :name == 'payments'? + + + + :name == 'legals'? + + + + : + null + } + + ) +} + diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx new file mode 100644 index 0000000..040ac44 --- /dev/null +++ b/src/components/Icons/index.tsx @@ -0,0 +1,3 @@ +import Icons from "./Icons"; + +export { Icons }; \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index dce8731..f4d027e 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,7 @@ -export * from "./Header" -export * from "./Home" -export * from "./GetStarted" -export * from "./shared" -export * from "./Footer" \ No newline at end of file +export * from "./Header"; +export * from "./Home"; +export * from "./GetStarted"; +export * from "./shared"; +export * from "./Footer"; +export * from "./DashboardLayout"; +export * from "./Icons"; diff --git a/src/index.css b/src/index.css index 8d31b54..296583e 100644 --- a/src/index.css +++ b/src/index.css @@ -16,4 +16,7 @@ body { .containerMode { @apply container mx-auto px-5 xxs:max-w-full sm:max-w-[98%] lg:max-w-[1100px]; } + .dash-bg-image{ + background: url('../src/assets/images/dashboard/bg_ellipse1.png') right top no-repeat, url('../src/assets/images/dashboard/bg_ellipse2.png') -8% bottom no-repeat;; + } } \ No newline at end of file diff --git a/src/pages/DashboardHome.tsx b/src/pages/DashboardHome.tsx new file mode 100644 index 0000000..d12cb4b --- /dev/null +++ b/src/pages/DashboardHome.tsx @@ -0,0 +1,5 @@ +export default function DashboardHome() { + return ( +
DashboardHome
+ ) +} diff --git a/src/pages/index.ts b/src/pages/index.ts index b052ca2..193e2c2 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -1,5 +1,6 @@ import HomePage from "./HomePage"; import LoginPage from "./LoginPage"; import GetStartedPage from "./GetStartedPage"; +import DashboardHome from "./DashboardHome"; -export {HomePage, LoginPage, GetStartedPage} \ No newline at end of file +export {HomePage, LoginPage, GetStartedPage, DashboardHome} \ No newline at end of file diff --git a/src/router/Router.tsx b/src/router/Router.tsx index 65df52d..2ca4c52 100644 --- a/src/router/Router.tsx +++ b/src/router/Router.tsx @@ -1,6 +1,7 @@ import { Route, Routes } from "react-router-dom"; import { RouteHandler } from "./routes"; -import { GetStartedPage, HomePage, LoginPage } from "../pages"; +import { GetStartedPage, HomePage, LoginPage, DashboardHome } from "../pages"; +import { DashboardAuth } from "../components"; const Routers = () => { return ( @@ -8,6 +9,10 @@ const Routers = () => { } /> } /> } /> + }> + } /> + + Error Page} /> ); }; diff --git a/src/router/routes.tsx b/src/router/routes.tsx index 982a507..f681ca2 100644 --- a/src/router/routes.tsx +++ b/src/router/routes.tsx @@ -2,4 +2,5 @@ export class RouteHandler { static homepage = "/" static loginpage = '/login' static getStarted = "/get-started" + static dashboardHome = '/dashboard/home' } \ No newline at end of file