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..35f5d55 --- /dev/null +++ b/src/components/DashboardLayout/Aside.tsx @@ -0,0 +1,52 @@ +import { Link, useLocation, useNavigate } from "react-router-dom"; + +import { Icons } from "../index"; + +export default function Aside() { + + const {pathname} = useLocation() + + const navigate = useNavigate() + + 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/Login/Login.tsx b/src/components/Login/Login.tsx index 52381d5..a3a669a 100644 --- a/src/components/Login/Login.tsx +++ b/src/components/Login/Login.tsx @@ -1,66 +1,73 @@ -import { Button, Footer } from '../../components' +import {useState} from 'react' +import { Button, Footer, FloatLabelInput } from '../../components' import { Link } from 'react-router-dom' +type FormType = { + email:string, + password:string +} + +type HandleChange = { + name:string, + value:string + } + export default function Login() { + let [formDetails, setFormDetails] = useState({ + email: '', + password: '' + }) + + const handleFormChange = ({target:{name, value}}:{target:HandleChange}):void => { + setFormDetails(prev => ({...prev, [name]:value})) + } + return (
-
-
+
+

Welcome!

-

Please login to admin dashboard

+

Please login to admin dashboard

{/* INPUTS */} - {/* THIS INPUTS WILL BE MADE A COMPONENT LATER, TO AVOID REPEATINGS THINGS */}
- -
- -
@@ -69,7 +76,7 @@ export default function Login() {
{/* FOOTER SECTION */} -
+
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/components/shared/FloatLabelInput.tsx b/src/components/shared/FloatLabelInput.tsx new file mode 100644 index 0000000..a512bd3 --- /dev/null +++ b/src/components/shared/FloatLabelInput.tsx @@ -0,0 +1,42 @@ + +type Props = { + id?:string, + name?:string, + type?:string, + placeHolder?:string, + labelName?:string, + inputClass?:string, + value:string, + onChange:()=>void +} + +export default function FloatLabelInput({ + id, + name, + type, + placeHolder, + labelName, + value, + inputClass, + onChange +}:Props) { + return ( +
+ + +
+ ) +} diff --git a/src/components/shared/index.ts b/src/components/shared/index.ts index 4f733f4..3b0f127 100644 --- a/src/components/shared/index.ts +++ b/src/components/shared/index.ts @@ -1,3 +1,4 @@ import Button from "./Button"; +import FloatLabelInput from "./FloatLabelInput"; -export {Button} \ No newline at end of file +export {Button, FloatLabelInput} \ No newline at end of file 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/DashboardLegals.tsx b/src/pages/DashboardLegals.tsx new file mode 100644 index 0000000..b3a33c8 --- /dev/null +++ b/src/pages/DashboardLegals.tsx @@ -0,0 +1,5 @@ +export default function DashboardLegals() { + return ( +
DashboardLegals
+ ) +} diff --git a/src/pages/DashboardPayments.tsx b/src/pages/DashboardPayments.tsx new file mode 100644 index 0000000..2a345c3 --- /dev/null +++ b/src/pages/DashboardPayments.tsx @@ -0,0 +1,5 @@ +export default function Dashboardpayments() { + return ( +
Dashboardpayments
+ ) +} diff --git a/src/pages/DashboardProfile.tsx b/src/pages/DashboardProfile.tsx new file mode 100644 index 0000000..06e19b2 --- /dev/null +++ b/src/pages/DashboardProfile.tsx @@ -0,0 +1,5 @@ +export default function DashboardProfile() { + return ( +
DashboardProfile
+ ) +} diff --git a/src/pages/DashboardVerification.tsx b/src/pages/DashboardVerification.tsx new file mode 100644 index 0000000..a5f5c55 --- /dev/null +++ b/src/pages/DashboardVerification.tsx @@ -0,0 +1,5 @@ +export default function DashboardVerification() { + return ( +
DashboardVerification
+ ) +} diff --git a/src/pages/index.ts b/src/pages/index.ts index b052ca2..512317e 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -1,5 +1,10 @@ import HomePage from "./HomePage"; import LoginPage from "./LoginPage"; import GetStartedPage from "./GetStartedPage"; +import DashboardHome from "./DashboardHome"; +import DashboardLegals from "./DashboardLegals"; +import DashboardProfile from "./DashboardProfile"; +import DashboardVerification from "./DashboardVerification"; +import Dashboardpayments from "./DashboardPayments"; -export {HomePage, LoginPage, GetStartedPage} \ No newline at end of file +export {HomePage, LoginPage, GetStartedPage, DashboardHome, DashboardLegals, DashboardProfile, DashboardVerification, Dashboardpayments} \ No newline at end of file diff --git a/src/router/Router.tsx b/src/router/Router.tsx index 65df52d..f6c977b 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, DashboardLegals, DashboardProfile, DashboardVerification, Dashboardpayments } from "../pages"; +import { DashboardAuth } from "../components"; const Routers = () => { return ( @@ -8,6 +9,14 @@ const Routers = () => { } /> } /> } /> + }> + } /> + } /> + } /> + } /> + } /> + + Error Page} /> ); }; diff --git a/src/router/routes.tsx b/src/router/routes.tsx index 982a507..af17bd3 100644 --- a/src/router/routes.tsx +++ b/src/router/routes.tsx @@ -2,4 +2,9 @@ export class RouteHandler { static homepage = "/" static loginpage = '/login' static getStarted = "/get-started" + static dashboardHome = '/dashboard/home' + static dashboardProfile = '/dashboard/profile' + static dashboardVerification = '/dashboard/verification' + static dashboardPayments = '/dashboard/payments' + static dashboardLegals = '/dashboard/legals' } \ No newline at end of file