diff --git a/src/App.css b/src/App.css index 0fc9006..3eaebf4 100644 --- a/src/App.css +++ b/src/App.css @@ -18,6 +18,26 @@ background-color: #5A2C82; } +.btn-W { + background: white !important; + border-radius: 8px; + font-size: 18px; + font-weight: bold; + color: #FBB700; + line-height: 25px; + align-items: center !important; +} + +.btn-Y { + background: #FBB700 !important; + border-radius: 8px; + font-size: 18px; + font-weight: bold; + /* color: white; */ + line-height: 25px; + align-items: center !important; +} + .sidebar { position: fixed; top: 0; diff --git a/src/assets/images/dashboard/dashDefault.svg b/src/assets/images/dashboard/dashDefault.svg new file mode 100644 index 0000000..9c84424 --- /dev/null +++ b/src/assets/images/dashboard/dashDefault.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/dashboard/naira-bag.png b/src/assets/images/dashboard/naira-bag.png new file mode 100644 index 0000000..9cdfc25 Binary files /dev/null and b/src/assets/images/dashboard/naira-bag.png differ diff --git a/src/components/Dashboard/DashboardFormInit.tsx b/src/components/Dashboard/DashboardFormInit.tsx new file mode 100644 index 0000000..e452de7 --- /dev/null +++ b/src/components/Dashboard/DashboardFormInit.tsx @@ -0,0 +1,51 @@ +import { Button, InputCompOne, Stepper } from ".."; +import { useNavigate } from "react-router-dom"; +import { RouteHandler } from "../../router/routes"; + +export default function DashboardFormInit() { + let navigate = useNavigate(); + + const navigateToProfile = () => navigate(RouteHandler.dashboardProfile); + return ( +
+
+ +
+
+ + + +
+
+ ); +} diff --git a/src/components/Dashboard/DashboardHome.tsx b/src/components/Dashboard/DashboardHome.tsx index 97ddcf3..5b24265 100644 --- a/src/components/Dashboard/DashboardHome.tsx +++ b/src/components/Dashboard/DashboardHome.tsx @@ -1,58 +1,24 @@ -import { DefaultCard } from "../" +import React, { FC } from "react"; +import DashboardHomeIntro from "./DashboardHomeIntro"; +import DashboardFormInit from "./DashboardFormInit"; + +interface DashboardHomeProps {} + +const DashboardHome: FC = () => { + const [step, setStep] = React.useState(1); + + const handleNextStep = () => { + if (step < 2) { + setStep(step + 1); + } + }; -export default function DashboardHome() { return ( -
-
- {console.log('working')}} - /> -
- -
- {/* cards display */} -
- {console.log('working')}} - /> -
-
- {console.log('working')}} - /> -
-
- {console.log('working')}} - /> -
-
+
+ {step === 1 && } + {step === 2 && }
- ) -} + ); +}; + +export default DashboardHome; diff --git a/src/components/Dashboard/DashboardHomeIntro.tsx b/src/components/Dashboard/DashboardHomeIntro.tsx new file mode 100644 index 0000000..322ab5d --- /dev/null +++ b/src/components/Dashboard/DashboardHomeIntro.tsx @@ -0,0 +1,154 @@ +import React, { FC } from "react"; +import NairaBag from "../../assets/images/dashboard/naira-bag.png"; +import { Button } from "../"; + +export interface DashBoardCardProps { + title?: string; + desc?: string; + descSpan?: string; + descSpanClass?: string; + onClick?: any; + cardClass?: string; + titleClass?: string; + descClass?: string; + btnTitle?: string; + btnTextClass?: string; + image?: any; + imgClass?: string; +} + +export const DashBoardCard: React.FC = ({ + title, + desc, + onClick, + cardClass, + titleClass, + descClass, + descSpan, + descSpanClass, + btnTitle, + btnTextClass, + image, + imgClass, +}) => { + return ( +
+
+ {title && ( +

+ {title} +

+ )} + {desc && ( +

+ {desc}{" "} + {descSpan && ( + + {descSpan} + + )} +

+ )} + {btnTitle && ( +
+ {image && card-image} +
+ ); +}; + +interface DashboardHomeIntroProps { + handleNextStep: any; +} + +const DashboardHomeIntro: FC = ({ handleNextStep }) => { + return ( + <> +

Hello, Olanrewaju

+
+ +
+ + ); +}; + +export default DashboardHomeIntro; + +// {/*
+// { +// console.log("working"); +// }} +// /> +//
*/} + +// {/*
+//
+// { +// console.log("working"); +// }} +// /> +//
+//
+// { +// console.log("working"); +// }} +// /> +//
+//
+// { +// console.log("working"); +// }} +// /> +//
+//
*/} diff --git a/src/components/Dashboard/DashboardProfile.tsx b/src/components/Dashboard/DashboardProfile.tsx new file mode 100644 index 0000000..aad44d9 --- /dev/null +++ b/src/components/Dashboard/DashboardProfile.tsx @@ -0,0 +1,68 @@ +import { Button, InputCompOne, Stepper } from ".."; + +export default function DashboardProfile() { + return ( +
+
+ +
+
+
+ + +
+
+ {" "} + +
+ +
+
+ ); +} diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx index 1525f00..e26e6ca 100644 --- a/src/components/Dashboard/index.tsx +++ b/src/components/Dashboard/index.tsx @@ -1,3 +1,4 @@ import DashboardHome from './DashboardHome' +import DashboardProfile from './DashboardProfile'; -export { DashboardHome }; \ No newline at end of file +export { DashboardHome, DashboardProfile }; \ No newline at end of file diff --git a/src/components/DashboardLayout/Aside.tsx b/src/components/DashboardLayout/Aside.tsx deleted file mode 100644 index c37e932..0000000 --- a/src/components/DashboardLayout/Aside.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import {useState} from 'react' -import { Link, useLocation, useNavigate } from "react-router-dom"; - -import { Icons } from "../index"; - -type Props = { - asideDisplay?: () => void -} - -export default function Aside({asideDisplay}:Props) { - - const {pathname} = useLocation() - - const navigate = useNavigate() - - const [openNestedLink, setOpenNestedLink] = useState<{name:string|null}>({name: ''}) - - const handleOpenNestedLink = (e:any) => { - if(!e || !e.target){ - return setOpenNestedLink({name: ''}) - } - if(openNestedLink.name && openNestedLink.name == e.target.name){ - setOpenNestedLink({name: ''}) - }else{ - setOpenNestedLink({name: e.target.name}) - } - } - - return ( -
-
-

- AC -

-
-
- {asideLinks.map((link, index) => { - if(link.nestedLink?.length){ - let allNestedLinks = link.nestedLink.map(item => item.link) - return ( -
- -
- {link.nestedLink.map((nextLink, index) => ( - {asideDisplay && asideDisplay()}} - key={index} - to={nextLink.link ? nextLink.link : '#'} - className={`w-full my-1 flex items-center gap-2 py-2 pl-5 text-base font-medium border-l-2 ${pathname == nextLink.link ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`} - > - - {nextLink.name} - - ))} -
-
- ) - }else{ - return( - {asideDisplay && asideDisplay()}} - key={index} - to={link.link ? link.link : '#'} - className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium border-2 ${pathname == link.link ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`} - > - - {link.name} - - ) - } - })} -
-
- -
-
- ); -} - - -type AsideLinksType = { - name: string, - link?: string, - icon: string, - nestedLink:{ - name: string, - link: string, - icon: string, - }[] -}[] -const asideLinks:AsideLinksType = [ - {name: 'Home', link: '/dashboard/home', icon: 'home', nestedLink:[]}, - {name: 'My Profile', link: '/dashboard/profile', icon: 'profile', nestedLink:[]}, - {name: 'Verification', link: '/dashboard/verification', icon: 'verification', nestedLink:[]}, - {name: 'Payments', link: '/dashboard/payments', icon: 'payments', nestedLink:[]}, - {name: 'Legals', link: '/dashboard/legals', icon: 'legals', nestedLink:[]}, - {name: 'Nested Link', icon: 'home', nestedLink:[ - {name: 'Link 2', link: '/dashboard/not-found', icon: 'legals'}, - {name: 'Link 1', link: '/dashboard/not-found', icon: 'home'} - ] - }, -] diff --git a/src/components/DashboardLayout/DashboardLayout.tsx b/src/components/DashboardLayout/DashboardLayout.tsx deleted file mode 100644 index 8d0f27c..0000000 --- a/src/components/DashboardLayout/DashboardLayout.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { ReactNode, useState, useEffect } from 'react' - -import Aside from './Aside' - -export default function DashboardLayout({children}:{children: ReactNode}) { - - const [showAside, setShowAside] = useState(false) - - const asideDisplay = ():void => { - 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/GetStarted/GetStarted.tsx b/src/components/GetStarted/GetStarted.tsx index e0eb8ec..7a1eaf1 100644 --- a/src/components/GetStarted/GetStarted.tsx +++ b/src/components/GetStarted/GetStarted.tsx @@ -8,7 +8,9 @@ const GetStarted = () => { const [step, setStep] = React.useState(1); const handleNextStep = () => { - setStep(step + 1); + if (step < 4) { + setStep(step + 1); + } }; // const handlePreviousStep: React.MouseEvent = () => { diff --git a/src/components/Icons/Icons.tsx b/src/components/Icons/Icons.tsx index 2f2ef3a..e1258f4 100644 --- a/src/components/Icons/Icons.tsx +++ b/src/components/Icons/Icons.tsx @@ -1,45 +1,114 @@ +import dashIcon from "../../assets/images/dashboard/dashDefault.svg"; type Props = { - name:string, - fillColor?:string -} + name: string; + fillColor?: string; +}; -export default function Icons({name, fillColor}:Props) { +export default function Icons({ name, fillColor }: Props) { return ( <> - {name == 'home' ? - - - - - :name == 'profile'? - - - - - :name == 'verification'? - - - - :name == 'payments'? - - - - :name == 'legals'? - - - - :name == 'arrow'? - - - - :name == 'greater-than'? - - - - : - null - } + {name == "home" ? ( + + + + + ) : name == "profile" ? ( + + + + + ) : name == "verification" ? ( + + + + ) : name == "payments" ? ( + + + + ) : name == "legals" ? ( + + + + ) : name == "arrow" ? ( + + + + ) : name == "greater-than" ? ( + + + + ) : name == "dash-icon" ? ( + dash-icon + ) : null} - ) + ); } - diff --git a/src/components/index.ts b/src/components/index.ts index 50e7f51..5ed0e38 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -3,7 +3,7 @@ export * from "./Home"; export * from "./GetStarted"; export * from "./shared"; export * from "./Footer"; -export * from "./DashboardLayout"; +// export * from "./DashboardLayout"; export * from "./Icons"; export * from "./Dashboard"; export * from "./Cards"; diff --git a/src/components/shared/Stepper.tsx b/src/components/shared/Stepper.tsx new file mode 100644 index 0000000..45b76c4 --- /dev/null +++ b/src/components/shared/Stepper.tsx @@ -0,0 +1,25 @@ +import React from "react"; + +interface StepperProps { + step: number; +} + +const Stepper: React.FC = ({ step = 0 }) => { + // const [activeStep, setActiveStep] = useState(step); + + return ( +
+ {[...Array(6)].map((_, index) => ( +
setActiveStep(index)} + /> + ))} +
+ ); +}; + +export default Stepper; diff --git a/src/components/shared/index.ts b/src/components/shared/index.ts index 19fca11..7a3ffd4 100644 --- a/src/components/shared/index.ts +++ b/src/components/shared/index.ts @@ -1,5 +1,6 @@ import Button from "./Button"; import InputCompOne from "./InputCompOne"; import FloatLabelInput from "./FloatLabelInput"; +import Stepper from "./Stepper"; -export { Button, FloatLabelInput, InputCompOne }; +export { Button, FloatLabelInput, InputCompOne, Stepper }; diff --git a/src/index.css b/src/index.css index 296583e..8d31b54 100644 --- a/src/index.css +++ b/src/index.css @@ -16,7 +16,4 @@ 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/layouts/DashboardLayout/Aside.tsx b/src/layouts/DashboardLayout/Aside.tsx new file mode 100644 index 0000000..56d2673 --- /dev/null +++ b/src/layouts/DashboardLayout/Aside.tsx @@ -0,0 +1,183 @@ +import { useState } from "react"; +import { Link, useLocation, useNavigate } from "react-router-dom"; +import Logo from "../../assets/icons/logo.svg"; +import { Icons } from "../../components"; + +type Props = { + asideDisplay?: () => void; +}; + +export default function Aside({ asideDisplay }: Props) { + const { pathname } = useLocation(); + + const navigate = useNavigate(); + + const [openNestedLink, setOpenNestedLink] = useState<{ name: string | null }>( + { name: "" } + ); + + const handleOpenNestedLink = (e: any) => { + if (!e || !e.target) { + return setOpenNestedLink({ name: "" }); + } + if (openNestedLink.name && openNestedLink.name == e.target.name) { + setOpenNestedLink({ name: "" }); + } else { + setOpenNestedLink({ name: e.target.name }); + } + }; + + return ( +
+ + Logo + +
+ {asideLinks.map((link, index) => { + if (link.nestedLink?.length) { + let allNestedLinks = link.nestedLink.map((item) => item.link); + return ( +
+ +
+ {link.nestedLink.map((nextLink, index) => ( + { + asideDisplay && asideDisplay(); + }} + key={index} + to={nextLink.link ? nextLink.link : "#"} + className={`w-full my-1 flex items-center gap-2 py-2 pl-5 text-base font-medium ${ + pathname == nextLink.link + ? " text-[#5C2684]" + : "text-[#585858]" + }`} + > + + {nextLink.name} + + ))} +
+
+ ); + } else { + return ( + { + asideDisplay && asideDisplay(); + }} + key={index} + to={link.link ? link.link : "#"} + className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium ${ + pathname == link.link ? "text-[#5C2684]" : "text-[#585858]" + }`} + > + + {link.name} + + ); + } + })} +
+
+ + + +
+

+ For more enquiries and support +

+

+ Call: 09099000000 +

+

+ Email: fcmbloan@support.com +

+
+ +
+
+ ); +} + +type AsideLinksType = { + name: string; + link?: string; + icon: string; + nestedLink?: { + name: string; + link: string; + icon: string; + }[]; +}[]; + +const asideLinks: AsideLinksType = [ + { name: "Dashboard", link: "/dashboard/home", icon: "dash-icon", nestedLink: [] }, + { + name: "Your Profile", + link: "/dashboard/profile", + icon: "dash-icon", + nestedLink: [], + }, + { + name: "Employment Details", + link: "/dashboard/verification", + icon: "dash-icon", + nestedLink: [], + }, + { + name: "Reference Details", + link: "/dashboard/payments", + icon: "dash-icon", + nestedLink: [], + }, + { + name: "Agreements", + link: "/dashboard/legals", + icon: "dash-icon", + nestedLink: [], + }, + // {name: 'Nested Link', icon: 'home', nestedLink:[ + // {name: 'Link 2', link: '/dashboard/not-found', icon: 'legals'}, + // {name: 'Link 1', link: '/dashboard/not-found', icon: 'home'} + // ] + // }, +]; diff --git a/src/components/DashboardLayout/DashboardAuth.tsx b/src/layouts/DashboardLayout/DashboardAuth.tsx similarity index 99% rename from src/components/DashboardLayout/DashboardAuth.tsx rename to src/layouts/DashboardLayout/DashboardAuth.tsx index fd9a548..7a7bd45 100644 --- a/src/components/DashboardLayout/DashboardAuth.tsx +++ b/src/layouts/DashboardLayout/DashboardAuth.tsx @@ -1,3 +1,4 @@ + import DashboardLayout from "./DashboardLayout"; import { Outlet } from "react-router-dom"; diff --git a/src/layouts/DashboardLayout/DashboardLayout.tsx b/src/layouts/DashboardLayout/DashboardLayout.tsx new file mode 100644 index 0000000..944e7ca --- /dev/null +++ b/src/layouts/DashboardLayout/DashboardLayout.tsx @@ -0,0 +1,84 @@ +import { ReactNode, useState, useEffect } from "react"; + +import Aside from "./Aside"; + +export default function DashboardLayout({ children }: { children: ReactNode }) { + const [showAside, setShowAside] = useState(false); + const asideDisplay = (): void => { + setShowAside((prev) => !prev); + }; + + useEffect(() => { + const handleResize = () => { + return setShowAside(false); + }; + window.addEventListener("resize", handleResize); + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + + // Assume this interface for ChildProps + // interface ChildProps { + // customProp?: string; + // } + + // const enhanceChildren = React.Children.map(children, (child) => { + // if (React.isValidElement(child)) { + // return React.cloneElement(child, { customProp: "Hello, World!" }); + // } + // return child; + // }); + + return ( +
+
+ ); +} + +// {/*
+//
+ +// {/* MENU HAND BURGER */} +//
Welcome Austin Catherine
+//
+//
+//
+//
+//
+//
+//
*/} diff --git a/src/components/DashboardLayout/index.tsx b/src/layouts/DashboardLayout/index.tsx similarity index 100% rename from src/components/DashboardLayout/index.tsx rename to src/layouts/DashboardLayout/index.tsx diff --git a/src/layouts/index.ts b/src/layouts/index.ts index e24576d..8c1a7f0 100644 --- a/src/layouts/index.ts +++ b/src/layouts/index.ts @@ -1,4 +1,7 @@ import HomeLayout from "./HomeLayout"; import LetsGetStartedLayout from "./LetsGetStartedLayout"; import GetStartedLayout from "./GetStartedLayout"; -export { HomeLayout, LetsGetStartedLayout, GetStartedLayout }; +import DashboardLayout from "./DashboardLayout/DashboardLayout"; +import { DashboardAuth } from "./DashboardLayout"; + +export { HomeLayout, LetsGetStartedLayout, GetStartedLayout, DashboardLayout, DashboardAuth }; diff --git a/src/pages/DashboardProfilePage.tsx b/src/pages/DashboardProfilePage.tsx index cf2ae24..5f8c8ae 100644 --- a/src/pages/DashboardProfilePage.tsx +++ b/src/pages/DashboardProfilePage.tsx @@ -1,5 +1,9 @@ +import { DashboardProfile } from "../components"; + export default function DashboardProfilePage() { return ( -
DashboardProfile
- ) + <> + + + ); } diff --git a/src/router/Router.tsx b/src/router/Router.tsx index 7882f41..b4241e1 100644 --- a/src/router/Router.tsx +++ b/src/router/Router.tsx @@ -15,7 +15,7 @@ import { PersonalBankingPage, LetsGetStatedPage, } from "../pages"; -import { DashboardAuth } from "../components"; +import { DashboardAuth } from "../layouts"; const Routers = () => { return (