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/assets/images/dashboard/card_bg.png b/src/assets/images/dashboard/card_bg.png new file mode 100644 index 0000000..1b5e4e7 Binary files /dev/null and b/src/assets/images/dashboard/card_bg.png differ diff --git a/src/components/Cards/DefaultCard.tsx b/src/components/Cards/DefaultCard.tsx new file mode 100644 index 0000000..041c3bb --- /dev/null +++ b/src/components/Cards/DefaultCard.tsx @@ -0,0 +1,42 @@ +import { Icons } from "../" + +type Props = { + title?: string, + descText?: string, + iconName?: string, + iconColor?: string, + cardClass?: string, + titleClass?: string, + descTextClass?: string, + onClick?: ()=>any +} + + +export default function DefaultCard({ +title, +descText, +iconName, +iconColor, +cardClass, +titleClass, +descTextClass, +onClick +}:Props) { + return ( + + ) +} diff --git a/src/components/Cards/index.tsx b/src/components/Cards/index.tsx new file mode 100644 index 0000000..2614703 --- /dev/null +++ b/src/components/Cards/index.tsx @@ -0,0 +1,3 @@ +import DefaultCard from "./DefaultCard"; + +export { DefaultCard }; \ No newline at end of file diff --git a/src/components/Dashboard/DashboardHome.tsx b/src/components/Dashboard/DashboardHome.tsx new file mode 100644 index 0000000..01c95fc --- /dev/null +++ b/src/components/Dashboard/DashboardHome.tsx @@ -0,0 +1,58 @@ +import { DefaultCard } from "../" + +export default function DashboardHome() { + return ( +
+
+ {console.log('working')}} + /> +
+ +
+ {/* cards display */} +
+ {console.log('working')}} + /> +
+
+ {console.log('working')}} + /> +
+
+ {console.log('working')}} + /> +
+
+
+ ) +} diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx new file mode 100644 index 0000000..1525f00 --- /dev/null +++ b/src/components/Dashboard/index.tsx @@ -0,0 +1,3 @@ +import DashboardHome from './DashboardHome' + +export { DashboardHome }; \ No newline at end of file diff --git a/src/components/DashboardLayout/Aside.tsx b/src/components/DashboardLayout/Aside.tsx new file mode 100644 index 0000000..2e833e4 --- /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..f73bac0 --- /dev/null +++ b/src/components/DashboardLayout/DashboardLayout.tsx @@ -0,0 +1,92 @@ +import { ReactNode, useState, useEffect } from 'react' + +import Aside from './Aside' + +export default function DashboardLayout({children}:{children: ReactNode}) { + + const [showAside, setShowAside] = useState(false) + + const AsideDisplay = () => { + setShowAside(prev => !prev) + } + + useEffect(() => { + const handleResize = () => { + return setShowAside(false) + // setWidthSize(window.innerWidth) + } + window.addEventListener('resize', handleResize) + + // 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..2f2ef3a --- /dev/null +++ b/src/components/Icons/Icons.tsx @@ -0,0 +1,45 @@ +type Props = { + name:string, + fillColor?:string +} + +export default function Icons({name, fillColor}:Props) { + return ( + <> + {name == 'home' ? + + + + + :name == 'profile'? + + + + + :name == 'verification'? + + + + :name == 'payments'? + + + + :name == 'legals'? + + + + :name == 'arrow'? + + + + :name == 'greater-than'? + + + + : + 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..8a494c9 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}):any => { + 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..c5a1cd8 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,9 @@ -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"; +export * from './Dashboard' +export * from './Cards' diff --git a/src/components/shared/FloatLabelInput.tsx b/src/components/shared/FloatLabelInput.tsx new file mode 100644 index 0000000..6ef36ad --- /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:(event?: any)=>any +} + +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 750e379..19fca11 100644 --- a/src/components/shared/index.ts +++ b/src/components/shared/index.ts @@ -1,4 +1,5 @@ import Button from "./Button"; import InputCompOne from "./InputCompOne"; +import FloatLabelInput from "./FloatLabelInput"; -export {Button, InputCompOne} \ No newline at end of file +export { Button, FloatLabelInput, InputCompOne }; 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/DashboardHomePage.tsx b/src/pages/DashboardHomePage.tsx new file mode 100644 index 0000000..7b02b80 --- /dev/null +++ b/src/pages/DashboardHomePage.tsx @@ -0,0 +1,9 @@ +import { DashboardHome } from "../components" + +export default function DashboardHomePage() { + return ( +
+ +
+ ) +} diff --git a/src/pages/DashboardLegalsPage.tsx b/src/pages/DashboardLegalsPage.tsx new file mode 100644 index 0000000..5101c4f --- /dev/null +++ b/src/pages/DashboardLegalsPage.tsx @@ -0,0 +1,5 @@ +export default function DashboardLegalsPage() { + return ( +
DashboardLegals
+ ) +} diff --git a/src/pages/DashboardPaymentsPage.tsx b/src/pages/DashboardPaymentsPage.tsx new file mode 100644 index 0000000..52e80af --- /dev/null +++ b/src/pages/DashboardPaymentsPage.tsx @@ -0,0 +1,5 @@ +export default function DashboardpaymentsPage() { + return ( +
Dashboardpayments
+ ) +} diff --git a/src/pages/DashboardProfilePage.tsx b/src/pages/DashboardProfilePage.tsx new file mode 100644 index 0000000..cf2ae24 --- /dev/null +++ b/src/pages/DashboardProfilePage.tsx @@ -0,0 +1,5 @@ +export default function DashboardProfilePage() { + return ( +
DashboardProfile
+ ) +} diff --git a/src/pages/DashboardVerificationPage.tsx b/src/pages/DashboardVerificationPage.tsx new file mode 100644 index 0000000..65b9262 --- /dev/null +++ b/src/pages/DashboardVerificationPage.tsx @@ -0,0 +1,5 @@ +export default function DashboardVerificationPage() { + return ( +
DashboardVerification
+ ) +} diff --git a/src/pages/index.ts b/src/pages/index.ts index 0b20d2c..10a23d4 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -1,5 +1,19 @@ import HomePage from "./HomePage"; import LoginPage from "./LoginPage"; import GetStartedPage from "./GetStartedPage"; +import DashboardHomePage from "./DashboardHomePage"; +import DashboardLegalsPage from "./DashboardLegalsPage"; +import DashboardProfilePage from "./DashboardProfilePage"; +import DashboardVerificationPage from "./DashboardVerificationPage"; +import DashboardpaymentsPage from "./DashboardPaymentsPage"; -export {HomePage, LoginPage, GetStartedPage} \ No newline at end of file +export { + HomePage, + LoginPage, + GetStartedPage, + DashboardHomePage, + DashboardLegalsPage, + DashboardProfilePage, + DashboardVerificationPage, + DashboardpaymentsPage, +}; diff --git a/src/router/Router.tsx b/src/router/Router.tsx index 65df52d..3cbe20f 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, DashboardHomePage, DashboardLegalsPage, DashboardProfilePage, DashboardVerificationPage, DashboardpaymentsPage } 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