src/components/DashboardLayout/Aside.tsx

@@ -1,4 +1,4 @@
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 
 import { Icons } from "../index";
 
@@ -6,6 +6,8 @@ export default function Aside() {
 
   const {pathname} = useLocation()
 
+  const navigate = useNavigate()
+
   return (
     <div className="py-5 px-10 flex flex-col h-full">
       <div className="flex justify-center items-center text-sm">
@@ -18,7 +20,7 @@ export default function Aside() {
             <Link
             key={index}
             to={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 ? 'border-2 border-[#5C2684] text-[#5C2684]' : 'text-[#585858]'}`}
+            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]'}`}
             >
             <Icons name={link.icon} fillColor={`${pathname == link.link ? '#5C2684' : '#585858'}`} />
             {link.name}
@@ -26,7 +28,7 @@ export default function Aside() {
         ))}
       </div>
       <div className="w-full flex justify-center items-center">
-        <button className="py-3 px-6 bg-red-100 text-red-500 font-medium">
+        <button className="py-3 px-6 bg-red-100 text-red-500 font-medium" onClick={()=>navigate('/login', {replace:true})}>
           Log out
         </button>
       </div>

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<FormType>({
+        email: '',
+        password: ''
+    })
+
+    const handleFormChange = ({target:{name, value}}:{target:HandleChange}):void => {
+        setFormDetails(prev => ({...prev, [name]:value}))
+    }
+
   return (
     <div className={`w-full h-screen overflow-y-auto bg-[url('../../../src/assets/images/sign-in.png')] bg-top bg-cover`}>
         <div className='containerMode h-full'>
             <div className='grid grid-cols-1 md:grid-cols-2 items-center h-full'>
-                <div className='bg-white col-start-1 md:col-start-2 w-full h-[450px] rounded-2xl shadow-lg'>
-                    <div className='w-full p-10 sm:p-20 flex flex-col justify-between items-center h-full'>
+                <div className='bg-white col-start-1 md:col-start-2 w-full rounded-2xl shadow-lg'>
+                    <div className='w-full p-10 sm:p-20 md:p-10 lg:p-20 flex flex-col justify-between items-center h-full'>
                         <div className='mb-4'>
                             <h1 className='text-2xl text-center font-bold leading-3 tracking-wide text-black dark:text-black'>Welcome!</h1>
-                            <p className='text-xl mt-2 text-center font-medium text-black dark:text-black'>Please login to admin dashboard</p>
+                            <p className='text-xl mt-4 text-center font-medium text-black dark:text-black'>Please login to admin dashboard</p>
                         </div>
 
                         <div className='w-full'>
                             {/* INPUTS */}
-                            {/* THIS INPUTS WILL BE MADE A COMPONENT LATER, TO AVOID REPEATINGS THINGS */}
                             <div className='w-full'>
                                 <div className='relative my-2 py-2'>
-                                    <input
-                                        id={'id'}
-                                        name={'email'}
-                                        className={`peer pr-8 w-full h-12 outline-none border-b-2 border-b-purple-500 placeholder:text-transparent transition-all duration-500`}
-                                        // type={type == "password" ? inputType : type}
-                                        type='text'
-                                        placeholder={'email'}
-                                        // value={value}
-                                        // onChange={onChange}
+                                    <FloatLabelInput 
+                                        id='email'
+                                        name='email'
+                                        type='email'
+                                        placeHolder='Email'
+                                        labelName='Email'
+                                        value={formDetails.email}
+                                        inputClass=''
+                                        onChange={handleFormChange}
                                     />
-                                    <label
-                                        htmlFor={'email'}
-                                        className={`text-sm text-black/70 absolute left-0 -top-1 translate-y-0 peer-focus:-top-1 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
-                                    >
-                                        {'Email'}
-                                    </label>
                                 </div>
                                 <div className='relative my-2 py-2'>
-                                    <input
-                                        id={'id'}
-                                        name={'password'}
-                                        className={`peer pr-8 w-full h-12 outline-none border-b-2 border-b-purple-500 placeholder:text-transparent transition-all duration-500`}
-                                        // type={type == "password" ? inputType : type}
+                                    <FloatLabelInput 
+                                        id='password'
+                                        name='password'
                                         type='password'
-                                        placeholder={'password'}
-                                        // value={value}
-                                        // onChange={onChange}
+                                        placeHolder='Password'
+                                        labelName='Password'
+                                        value={formDetails.password}
+                                        inputClass=''
+                                        onChange={handleFormChange}
                                     />
-                                    <label
-                                        htmlFor={'email'}
-                                        className={`text-sm text-black/70 absolute left-0 -top-1 translate-y-0 peer-focus:-top-1 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
-                                    >
-                                        {'Password'}
-                                    </label>
                                 </div>
                             </div>
 
                             <div className='mt-10 w-full sm:flex justify-between items-center gap-2'>
                                 <Button 
                                     text='Login' 
-                                    className='rounded-md w-full sm:w-2/5 text-xl' 
+                                    className='rounded-md w-full sm:w-2/5 text-xl capitalize font-bold' 
                                 />
-                                <Link to='#' className='text-black text-sm'>Forget your password</Link>
+                                <Link to='#' className='text-black text-sm'>Forget your password?</Link>
                             </div>
                         </div>
                     </div>
@@ -69,7 +76,7 @@ export default function Login() {
         </div>
 
         {/* FOOTER SECTION */}
-        <div className='page-footer'>
+        <div className='page-footer w-full fixed bottom-0'>
             <Footer />
         </div>
     </div>

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 (
+    <div className='w-full'>
+        <input
+            id={id ? id : ''}
+            name={name? name : ''}
+            className={`peer pr-8 w-full h-12 outline-none border-b-2 border-b-[#5A2C82] placeholder:text-transparent transition-all duration-500 ${inputClass && inputClass}`}
+            type={type ? type : 'text'}
+            placeholder={placeHolder ? placeHolder : ''}
+            value={value}
+            onChange={onChange}
+        />
+        <label
+            htmlFor={id ? id : ''}
+            className={`cursor-pointer text-sm text-black/70 absolute left-0 -top-1 translate-y-0 peer-focus:-top-1 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
+        >
+            {labelName ? labelName : ''}
+        </label>
+    </div>
+  )
+}

src/components/shared/index.ts

@@ -1,3 +1,4 @@
 import Button from "./Button";
+import FloatLabelInput from "./FloatLabelInput";
 
-export {Button}
+export {Button, FloatLabelInput}

src/pages/DashboardLegals.tsx

@@ -0,0 +1,5 @@
+export default function DashboardLegals() {
+  return (
+    <div>DashboardLegals</div>
+  )
+}

src/pages/DashboardPayments.tsx

@@ -0,0 +1,5 @@
+export default function Dashboardpayments() {
+  return (
+    <div>Dashboardpayments</div>
+  )
+}

src/pages/DashboardProfile.tsx

@@ -0,0 +1,5 @@
+export default function DashboardProfile() {
+  return (
+    <div>DashboardProfile</div>
+  )
+}

src/pages/DashboardVerification.tsx

@@ -0,0 +1,5 @@
+export default function DashboardVerification() {
+  return (
+    <div>DashboardVerification</div>
+  )
+}

src/pages/index.ts

@@ -2,5 +2,9 @@ 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, DashboardHome}
+export {HomePage, LoginPage, GetStartedPage, DashboardHome, DashboardLegals, DashboardProfile, DashboardVerification, Dashboardpayments}

src/router/Router.tsx

@@ -1,6 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 import { RouteHandler } from "./routes";
-import { GetStartedPage, HomePage, LoginPage, DashboardHome } from "../pages";
+import { GetStartedPage, HomePage, LoginPage, DashboardHome,  DashboardLegals, DashboardProfile, DashboardVerification, Dashboardpayments } from "../pages";
 import { DashboardAuth } from "../components";
 
 const Routers = () => {
@@ -11,6 +11,10 @@ const Routers = () => {
       <Route path={RouteHandler.getStarted} element={<GetStartedPage />} />
       <Route element={<DashboardAuth />}>
           <Route path={RouteHandler.dashboardHome} element={<DashboardHome />} />
+          <Route path={RouteHandler.dashboardProfile} element={<DashboardProfile />} />
+          <Route path={RouteHandler.dashboardVerification} element={<DashboardVerification />} />
+          <Route path={RouteHandler.dashboardPayments} element={<Dashboardpayments />} />
+          <Route path={RouteHandler.dashboardLegals} element={<DashboardLegals />} />
       </Route>
       <Route path='*'element={<>Error Page</>} />
     </Routes>

src/router/routes.tsx

@@ -3,4 +3,8 @@ export class RouteHandler {
     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'
 }