From ea4e6b7a5915e912cd53426e39a7f64a2b0ccf32 Mon Sep 17 00:00:00 2001 From: chukwumdiebube ojinta Date: Sat, 23 Mar 2024 17:03:13 +0100 Subject: [PATCH] Added new pages to dashboard --- src/App.css | 20 ++ src/assets/images/dashboard/dashDefault.svg | 9 + src/assets/images/dashboard/naira-bag.png | Bin 0 -> 3259 bytes .../Dashboard/DashboardFormInit.tsx | 51 +++++ src/components/Dashboard/DashboardHome.tsx | 76 ++------ .../Dashboard/DashboardHomeIntro.tsx | 154 +++++++++++++++ src/components/Dashboard/DashboardProfile.tsx | 68 +++++++ src/components/Dashboard/index.tsx | 3 +- src/components/DashboardLayout/Aside.tsx | 116 ----------- .../DashboardLayout/DashboardLayout.tsx | 92 --------- src/components/GetStarted/GetStarted.tsx | 4 +- src/components/Icons/Icons.tsx | 147 ++++++++++---- src/components/index.ts | 2 +- src/components/shared/Stepper.tsx | 25 +++ src/components/shared/index.ts | 3 +- src/index.css | 3 - src/layouts/DashboardLayout/Aside.tsx | 183 ++++++++++++++++++ .../DashboardLayout/DashboardAuth.tsx | 1 + .../DashboardLayout/DashboardLayout.tsx | 84 ++++++++ .../DashboardLayout/index.tsx | 0 src/layouts/index.ts | 5 +- src/pages/DashboardProfilePage.tsx | 8 +- src/router/Router.tsx | 2 +- 23 files changed, 743 insertions(+), 313 deletions(-) create mode 100644 src/assets/images/dashboard/dashDefault.svg create mode 100644 src/assets/images/dashboard/naira-bag.png create mode 100644 src/components/Dashboard/DashboardFormInit.tsx create mode 100644 src/components/Dashboard/DashboardHomeIntro.tsx create mode 100644 src/components/Dashboard/DashboardProfile.tsx delete mode 100644 src/components/DashboardLayout/Aside.tsx delete mode 100644 src/components/DashboardLayout/DashboardLayout.tsx create mode 100644 src/components/shared/Stepper.tsx create mode 100644 src/layouts/DashboardLayout/Aside.tsx rename src/{components => layouts}/DashboardLayout/DashboardAuth.tsx (99%) create mode 100644 src/layouts/DashboardLayout/DashboardLayout.tsx rename src/{components => layouts}/DashboardLayout/index.tsx (100%) 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 0000000000000000000000000000000000000000..9cdfc25f7ba5e8452cbfdd587b1ef433b669da48 GIT binary patch literal 3259 zcmV;s3`FyZP)t>Q9raFs;cxG>Ia|?1Vu_q5-2FN6(J8|96v%Fli2(4?s|7;?mfM;kTd~1*v{OU zS!aGy4Ix#?5~3H$~lu?&bIGI36`tas1v zIdcL$qV5co*wNktLc5nS2+#CB5#=F-f6qNVd!oF!U`9Y2_DB2oys8^10oo z2fza~s3TI_SKUYeTNp!Qwqp=6i~`n0H#D&FmX2}Qe{S}>sUKM4j*eTI#5mrgSq#>16(uE@<*4)LidDX$qh-pc&KQ?JV`x~UN3af%K-H`{RgJCN6hMK<8~UY zyj_|8!ug(D)fKT)56SUgE3L||bSm5EjrSPum-d&c;4Np65Ch(h@ohOnLl05SYkkw>1aNAdQeU|;`4{tcMjPzWFoJd9HALsK zyGLI5^n!Aixy|PbL@-=F*F{cVDM=8xJ`&^WMY)keQ7?vL7MK|J>f10-h%Of$SO^Hd zasP=#DHYcL1swX*uF)glAxaGd z`vxjtiFcq5v7MG!r1A=Qj9LRp@{Oa1?JE)L2qB|5yn;M!A9P*oF~%Rcd4f zs0T<80eii;>(n^-09T}*^1)0ca%XZ-x@W7Udlmt|A_G|j@p^90$WibKu4!?V1G#eL zj;<3Ct(=yIih8EZ@|6JfvGqGTYJuK0zRvV6m67zZ~@} z?=u_jryJgxZJA7e&yRB~uqU&4jVZ=*Y2|(i?umcQpyg9i7q@r_C}%o6(85 zIOs?fBrM5XXt_4%@-?qQnJk{yQKsj@SZZ4yEeuSybLii1L7n2yqLF^ko2NRz3Oc5^ zSbT#%AL_E~YR=g8ZIz??Zam)&$6)vQ4Tmz5QW3A$DhuEZw=J?lh!zo#clvY*jImo zIMe08C#4#rUun=61d$~edpkeT@*e#5@VqOIRN_AaJ$g$hk(#`Tq1fbhW_2M&kE-#N zff{$NY(diRl@j|h@DQQl!Td8rcADGsstEtYLEBe%a^zd3aiZV@km$oq)O-Ux&I$RV z^tYw2Yn>D@J*G#e&ZAbv?)7@R;k;kY@w4q;E;1!TEjC zb@KfV3+X8=OSMdRa+iB!AOhri`~j)CHA1~W)Sc?<>IIkavxcJr<0&VFVrJ)I%a_PH~*qJ0WRUXfdqtWrQ4Y?kLEwkZ%aA`eq zb)XVEx_cOi+o8^pd8kBWQ);?=Aa@oNXSEPa5D@dFHL^>gWf1qk3undUO z4Ns(%BpHx1XbWL0@e>ff& zDZPViS%)Dx?^>fcnSXZpuen_#Z^(e;B^f!+sk;>-PJkk$1hm%f!UYba)Ig?Yb^xLC zY6aIWe(&t=p&`z#zs+{2oYgK48bhdnB5Vn$pv4?3TfTtWJ_!Vle_rlhL^KLQd{q1CFq)w2z+u!0e!qcGaxnd4xlY8vc{17E!@v9d zKQ{KQSOXe13jrlvuz~?vk;n3-SsFHBYDbsdre-xb1ASyye?RNiD*ze5l3uXBrV{^-G zNX|`h(nVex+0?Yg*qFE>d{^pDcH5G()?1l;+pTS_(r0)W3Dz2SHj2uD{Kxk3l|%VV zbWCKXX99nZYxq72xndzW9R}!HXMVtZGg|})P;&?U05nFt z*=Zj{kVq0^IVR{V(|E1OeSCO)qOm9a7tVQJE7E0dboRN?e_nQiez5W|c=Ezu8+Wd( z0_l!>UOEW-Zg->+h8hDc>(PNsN2^4osVjQK_`~E=1DAVbF9M%}q2n-rq|aq^19QIA zjZE&?`m4l1t&v=l3C<=PrBsl~f8IE=U`O=h@hG2Zb5^1+eFuS9!!*>9L<&@ZS`#>g z5(8B!7IiwnvUfZrc68i^7CSGPX&50^n0V%NZM{kLb=}Q@I_1177k^CH^IWP5Xg#*< zkA;0_&s}yNouV?*U7~W|g2qG=972hbU>RIVK_UaTSvp_e(^zP$CD?}lzr&j}CI=l@ zQ%zd3{|I7wH1bHTY5Aq+P$>6YfPh8eGxg$XQ6u$m_4{h5w&n3t1ZvYW9whH5X0S)% zJC|Mb)Ho;Q2C@af)|Q+jYp{|jPUCva7UEQLsR$}1fr1pmW;qZIO@zK5eZ2kUP*Msp zC0wsO3q~^1$~MTcJqK5d5(8N}RSi&!jEmyo9i6KU+eBeGaH3=h|ubGlR} zLlNP~GOWZvp_+uCxbRY5rBT3#WE|tmtXi3{|+m87?zXr63#WUW)P z29cA5Cz9B~pq+}GyBGq-oiPwFMRIRspzNVngy;t@6Tkd#?FWz+){t|b*6i_(=DXeu!{ z2<+NghwQqE-0_kBfP<*>g=KP#1bhJ35Eas1ThJpyuYl5EB_!x*?XhIn0wmroKQ}l6 z4x`jS=l6`BArziI-o*_#iGl9S(zieX%ESGf)pStm%+s()k?D&QZKd$5hZQvfbVX*2 z_Vu)fnfXIlL~#3A4;H+ce}42`P>3tr@U4TB`N)R&vK?ibAk2O81QsUdXm+HE;Rlanr@xW{^_##8Fq7786AvhU>#eXSuu9l!%o1S<|14B zTjS<*yqgoQnLR^khRe}2h>;jTm}B^Jl}tv z5ucb$>J89fGCdJ03r#R)Xd$LsCKnLW 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 ( -- 2.34.1