From 2b5de9c95f0b0ba2157d822a03ca102045d89874 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Tue, 27 Feb 2024 00:39:51 +0100
Subject: [PATCH] Added the first 3 banners

---
 .../Dashboards/AccountDashboard.jsx           | 64 ++++++++++++++-----
 src/components/Home/FullAccountDash.jsx       |  4 +-
 2 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/src/components/Dashboards/AccountDashboard.jsx b/src/components/Dashboards/AccountDashboard.jsx
index 8c84348..75dc622 100644
--- a/src/components/Dashboards/AccountDashboard.jsx
+++ b/src/components/Dashboards/AccountDashboard.jsx
@@ -1,6 +1,18 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
-const AccountDashboard = ({ className }) => {
+const AccountDashboard = ({ className, bannerList }) => {
+  const getUpperBanner = bannerList?.slice(0, 3);
+
+  let getImage = ({banner_location, banner}) => {
+    if (banner_location == "LOCAL") {
+      return require(`../../assets/images/${banner}`);
+    } else {
+      return banner;
+    }
+  };
+
+  console.log(getUpperBanner);
   return (
     <div
       className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
@@ -8,11 +20,26 @@ const AccountDashboard = ({ className }) => {
       }`}
     >
       <div className="w-full h-[300px] md:grid grid-cols-3 items-center justify-center gap-2">
-        <TopBanner />
-        <TopBanner />
-        <TopBanner />
+        {getUpperBanner?.map((props, idx) => {
+
+          let image = getImage(props);
+
+          let { short_title, short_description, button_text, link_path } =
+            props;
+
+          return (
+            <TopBanner
+              btn={button_text}
+              image={image}
+              title={short_title}
+              desc={short_description}
+              link_path={link_path}
+              key={idx}
+            />
+          );
+        })}
       </div>
-      <div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4">
+      <div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4  ">
         <LowerBanner />
         <LowerBanner />
       </div>
@@ -22,24 +49,29 @@ const AccountDashboard = ({ className }) => {
 
 export default AccountDashboard;
 
-const TopBanner = () => {
-  let Image = require(`../../assets/images/offer.jpg`);
+const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
   return (
     <div className="flex flex-col shadow-md rounded-xl">
-      <div className="h-[12rem] rounded-t-xl">
+      <Link to={link_path} key={key} className="h-[12rem] rounded-t-xl">
         <img
-          src={Image}
+          src={image}
           alt="banner-img"
-          className="w-full h-full rounded-t-xl"
+          className="w-full h-full rounded-t-xl object-cover"
         />
-      </div>
+      </Link>
       <div className="h-[7rem] rounded-b-xl bg-white">
         <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem]">
-          <h3 className="font-bold text-lg">Banner Title</h3>
-          <p>Banner description text will come follow</p>
+          <Link to={link_path} className="font-bold text-lg">
+            {title}
+          </Link>
+          <Link to={link_path} className="text-sm">
+            {desc}
+          </Link>
         </div>
         <div className="flex justify-between w-full px-2 items-center">
-          <span className="text-slate-300 font-semibold">follow up text</span>
+          <Link to={link_path} className="text-slate-300 font-semibold">
+            {btn}
+          </Link>
           <button className="flex items-center justify-center gap-2">
             <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
             <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
@@ -48,10 +80,10 @@ const TopBanner = () => {
         </div>
       </div>
     </div>
-  );
+  );  
 };
 
-const LowerBanner = () => {
+const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key  }) => {
   let Image = require(`../../assets/images/offer.jpg`);
   return (
     <div className="flex flex-col bg-white shadow-md h-full rounded-xl">
diff --git a/src/components/Home/FullAccountDash.jsx b/src/components/Home/FullAccountDash.jsx
index 0a37391..e395926 100644
--- a/src/components/Home/FullAccountDash.jsx
+++ b/src/components/Home/FullAccountDash.jsx
@@ -59,13 +59,11 @@ export default function FullAccountDash(props) {
     }
   };
 
-  console.log(process.env.REACT_APP_SHOW_ACCOUNT_DASH)
-
   return (
     <>
       <div className="home-page-wrapper">
         {process.env.REACT_APP_SHOW_ACCOUNT_DASH == "1" && (
-          <AccountDashboard className="mb-4" />
+          <AccountDashboard className="mb-4" bannerList={props.bannerList} />
         )}
         {renderDashboard()}