From dde40725932d19f77e8e36802f6a05db98d6cb2a Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Mon, 18 Mar 2024 17:42:36 +0100
Subject: [PATCH] added pages for top header nav links

---
 src/components/Header/TopHeader.tsx | 28 +++++++++++++++++++---------
 src/pages/BusinessBankingPage.tsx   |  8 ++++++++
 src/pages/CooperateBankingPage.tsx  | 12 ++++++++++++
 src/pages/PersonalBankingPage.tsx   | 12 ++++++++++++
 src/pages/TermsAndConditionPage.tsx |  2 +-
 src/pages/index.ts                  |  6 ++++++
 src/router/Router.tsx               |  7 +++++++
 src/router/routes.tsx               |  3 +++
 src/utils/data.tsx                  |  9 +++++----
 9 files changed, 73 insertions(+), 14 deletions(-)
 create mode 100644 src/pages/BusinessBankingPage.tsx
 create mode 100644 src/pages/CooperateBankingPage.tsx
 create mode 100644 src/pages/PersonalBankingPage.tsx

diff --git a/src/components/Header/TopHeader.tsx b/src/components/Header/TopHeader.tsx
index 8eb83fb..51fc350 100644
--- a/src/components/Header/TopHeader.tsx
+++ b/src/components/Header/TopHeader.tsx
@@ -1,5 +1,7 @@
 import { top_header_data } from "../../utils/data";
+import { Link } from "react-router-dom";
 import styles from "./header.module.css";
+import { RouteHandler } from "../../router/routes";
 
 const TopHeader = () => {
   return (
@@ -7,28 +9,36 @@ const TopHeader = () => {
       <div className="flex flex-col sm:hidden bg-[#5c2684]">
         <ul className="flex flex-col justify-center items-center pt-[0.4rem] text-[13px] font-light">
           {["Open An Account", "Internet Banking", "Contact Us"].map((text) => (
-            <li key={text} className="w-full"> 
-              <a href="#" className={`p-2 cursor-pointer text-white  w-full items-center justify-center flex`}>
+            <li key={text} className="w-full">
+              <a
+                href="#"
+                className={`p-2 cursor-pointer text-white  w-full items-center justify-center flex`}
+              >
                 {text}
               </a>
             </li>
           ))}
           <li className="w-full flex items-center justify-center">
-              <a href="#" className={`p-2 mt-2 flex gap-2 bg-[#74449E] cursor-pointer text-white w-full items-center justify-center`}>
+            <a
+              href="#"
+              className={`p-2 mt-2 flex gap-2 bg-[#74449E] cursor-pointer text-white w-full items-center justify-center`}
+            >
               <p className="uppercase">Today's Share price:</p>
-            <span className="text-[#F8B51F] text-base md:text-lg">$ 4.00</span>
-              </a>
-            </li>
+              <span className="text-[#F8B51F] text-base md:text-lg">
+                $ 4.00
+              </span>
+            </a>
+          </li>
         </ul>
       </div>
       <div className={styles.top_header}>
         <div className="containerMode flex justify-between w-full text-white font-medium text-[11px] md:text-[13px]">
           <ul className="flex items-center py-[0.4rem] flex-wrap">
-            {top_header_data.map(({ id, name }) => (
+            {top_header_data.map(({ id, name, href }) => (
               <li key={id}>
-                <a href="#" className={`py-[11px] px-[15px]`}>
+                <Link to={href} className={`py-[11px] px-[15px]`}>
                   {name}
-                </a>
+                </Link>
               </li>
             ))}
           </ul>
diff --git a/src/pages/BusinessBankingPage.tsx b/src/pages/BusinessBankingPage.tsx
new file mode 100644
index 0000000..5185ecc
--- /dev/null
+++ b/src/pages/BusinessBankingPage.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { HomeLayout } from "../layouts";
+
+const BusinessBankingPage: React.FC = () => {
+  return <HomeLayout>Business Banking</HomeLayout>;
+};
+
+export default BusinessBankingPage;
diff --git a/src/pages/CooperateBankingPage.tsx b/src/pages/CooperateBankingPage.tsx
new file mode 100644
index 0000000..1a0f845
--- /dev/null
+++ b/src/pages/CooperateBankingPage.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { HomeLayout } from '../layouts'
+
+const CooperateBankingPage: React.FC = () => {
+  return (
+    <HomeLayout>
+      Cooperate Banking
+    </HomeLayout>
+  )
+}
+
+export default CooperateBankingPage
diff --git a/src/pages/PersonalBankingPage.tsx b/src/pages/PersonalBankingPage.tsx
new file mode 100644
index 0000000..95be387
--- /dev/null
+++ b/src/pages/PersonalBankingPage.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { HomeLayout } from '../layouts'
+
+const PersonalBankingPage: React.FC = () => {
+  return (
+    <HomeLayout>
+      Personal Banking
+    </HomeLayout>
+  )
+}
+
+export default PersonalBankingPage
diff --git a/src/pages/TermsAndConditionPage.tsx b/src/pages/TermsAndConditionPage.tsx
index a273710..b2c83c2 100644
--- a/src/pages/TermsAndConditionPage.tsx
+++ b/src/pages/TermsAndConditionPage.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { HomeLayout } from "../layouts";
 import { TsAndCs } from "../components";
 
-const TermsAndConditionPage = () => {
+const TermsAndConditionPage: React.FC = () => {
   return (
     <HomeLayout>
       <TsAndCs />
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 32f4957..91bd4d9 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -7,6 +7,9 @@ import DashboardProfilePage from "./DashboardProfilePage";
 import DashboardVerificationPage from "./DashboardVerificationPage";
 import DashboardpaymentsPage from "./DashboardPaymentsPage";
 import TermsAndConditionPage from "./TermsAndConditionPage";
+import PersonalBankingPage from "./PersonalBankingPage";
+import BusinessBankingPage from "./BusinessBankingPage";
+import CooperateBankingPage from "./CooperateBankingPage";
 
 export {
   HomePage,
@@ -18,4 +21,7 @@ export {
   DashboardVerificationPage,
   DashboardpaymentsPage,
   TermsAndConditionPage,
+  PersonalBankingPage,
+  BusinessBankingPage,
+  CooperateBankingPage
 };
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
index f03b3e2..f4fe8a0 100644
--- a/src/router/Router.tsx
+++ b/src/router/Router.tsx
@@ -10,6 +10,9 @@ import {
   DashboardVerificationPage,
   DashboardpaymentsPage,
   TermsAndConditionPage,
+  BusinessBankingPage,
+  CooperateBankingPage,
+  PersonalBankingPage,
 } from "../pages";
 import { DashboardAuth } from "../components";
 
@@ -23,6 +26,10 @@ const Routers = () => {
         path={RouteHandler.termsAndConditions}
         element={<TermsAndConditionPage />}
       />
+      <Route path={RouteHandler.businessBanking} element={<BusinessBankingPage />} />
+      <Route path={RouteHandler.cooperateBanking} element={<CooperateBankingPage />} />
+      <Route path={RouteHandler.personalBanking} element={<PersonalBankingPage />} />
+
       <Route element={<DashboardAuth />}>
         <Route
           path={RouteHandler.dashboardHome}
diff --git a/src/router/routes.tsx b/src/router/routes.tsx
index 210eff6..13c79dd 100644
--- a/src/router/routes.tsx
+++ b/src/router/routes.tsx
@@ -1,6 +1,9 @@
 export class RouteHandler {
   static homepage = "/";
   static loginpage = "/login";
+  static personalBanking = "/personal-banking";
+  static businessBanking = "/business-banking";
+  static cooperateBanking = "/cooperate-banking";
   static getStarted = "/get-started";
   static dashboardHome = "/dashboard/home";
   static dashboardProfile = "/dashboard/profile";
diff --git a/src/utils/data.tsx b/src/utils/data.tsx
index e3e1a9b..4c122b6 100644
--- a/src/utils/data.tsx
+++ b/src/utils/data.tsx
@@ -7,12 +7,13 @@ import XWhite from "../assets/images/socials/twitterx.svg";
 import WhatsappWhite from "../assets/images/socials/whatsapp.svg";
 import YoutubeWhite from "../assets/images/socials/youtube.svg";
 import InstagramWhite from "../assets/images/socials/instagram.svg";
+import { RouteHandler } from "../router/routes";
 
 export const top_header_data = [
-  { id: 1, name: "HOME" },
-  { id: 2, name: "PERSONAL" },
-  { id: 3, name: "BUSINESS" },
-  { id: 4, name: "CORPORATE" },
+  { id: 1, name: "HOME", href: RouteHandler.homepage },
+  { id: 2, name: "PERSONAL", href: RouteHandler.personalBanking },
+  { id: 3, name: "BUSINESS", href: RouteHandler.businessBanking },
+  { id: 4, name: "CORPORATE", href: RouteHandler.cooperateBanking },
 ];
 
 export const lowerMenuItems = [