Merge branch 'home-banners-dashboard' of WrenchBoard/Users-Wrench into master

2024-02-27 10:47:10 +00:00
parent e1de701ea6 3403210fe8
commit e7bf07d09e
3 changed files with 107 additions and 30 deletions
@@ -2,9 +2,11 @@ import React from "react";
 import { Link } from "react-router-dom";

 const AccountDashboard = ({ className, bannerList }) => {
-  const getUpperBanner = bannerList?.slice(0, 3);
+  // getting the upper three banners for the home layout
+  const getUpperBanner = bannerList?.filter((value, idx) => idx <= 2);
+  const getLowerBanner = bannerList?.filter((value, idx) => idx > 2);

-  let getImage = ({banner_location, banner}) => {
+  let getImage = ({ banner_location, banner }) => {
    if (banner_location == "LOCAL") {
      return require(`../../assets/images/${banner}`);
    } else {
@@ -12,7 +14,7 @@ const AccountDashboard = ({ className, bannerList }) => {
    }
  };

-  console.log(getUpperBanner);
+  console.log(getLowerBanner);
  return (
    <div
      className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
@@ -21,15 +23,14 @@ const AccountDashboard = ({ className, bannerList }) => {
    >
      <div className="w-full h-[300px] md:grid grid-cols-3 items-center justify-center gap-2">
        {getUpperBanner?.map((props, idx) => {
-
          let image = getImage(props);

-          let { short_title, short_description, button_text, link_path } =
+          let { short_title, short_description, short_button_text, link_path } =
            props;

          return (
            <TopBanner
-              btn={button_text}
+              btn={short_button_text}
              image={image}
              title={short_title}
              desc={short_description}
@@ -40,8 +41,23 @@ const AccountDashboard = ({ className, bannerList }) => {
        })}
      </div>
      <div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4  ">
-        <LowerBanner />
-        <LowerBanner />
+        {getLowerBanner?.map((props, idx) => {
+          let image = getImage(props);
+
+          let { short_title, short_description, short_button_text, link_path } =
+            props;
+
+          return (
+            <LowerBanner
+              btn={short_button_text}
+              image={image}
+              title={short_title}
+              desc={short_description}
+              link_path={link_path}
+              key={idx}
+            />
+          );
+        })}
      </div>
    </div>
  );
@@ -60,7 +76,7 @@ const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
        />
      </Link>
      <div className="h-[7rem] rounded-b-xl bg-white">
-        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem]">
+        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2">
          <Link to={link_path} className="font-bold text-lg">
            {title}
          </Link>
@@ -80,30 +96,38 @@ const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
        </div>
      </div>
    </div>
-  );  
+  );
 };

-const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key  }) => {
-  let Image = require(`../../assets/images/offer.jpg`);
+const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
  return (
-    <div className="flex flex-col bg-white shadow-md h-full rounded-xl">
+    <div
+      key={key}
+      className="flex flex-col bg-white shadow-md h-full rounded-xl"
+    >
      <div className="w-full flex justify-between border-b border-slate-300 p-2">
        <div className="h-[130px] flex justify-between items-center">
-          <div className="px-2">
-            <h3 className="text-lg font-bold">Banner Title</h3>
-            <p className="text-sm">Banner description text will come follow</p>
+          <div className="px-2 flex flex-col gap-2">
+            <Link to={link_path} className="text-lg font-bold">
+              {title}
+            </Link>
+            <p to={link_path} className="text-sm">
+              {desc}
+            </p>
          </div>
        </div>
-        <div className="w-[150px] h-[100px]">
+        <Link to={link_path} className="w-[150px] h-[100px]">
          <img
-            src={Image}
+            src={image}
            alt="banner-img"
            className="w-full h-full rounded-xl"
          />
-        </div>
+        </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>
@@ -113,3 +137,66 @@ const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key  }) =>
    </div>
  );
 };
+
+const BannerSection = ({ banners, variant }) => {
+  const getImage = ({ banner_location, banner }) => {
+    return banner_location === "LOCAL"
+      ? require(`../../assets/images/${banner}`)
+      : banner;
+  };
+
+  return (
+    <>
+      {banners?.map((props, idx) => {
+        const { short_title, short_description, short_button_text, link_path } =
+          props;
+        const image = getImage(props);
+
+        return (
+          <div
+            key={idx}
+            className={`flex flex-col shadow-md rounded-xl ${
+              variant === "top" ? "" : "bg-white"
+            }`}
+          >
+            <div className={`${variant === "top" ? "rounded-t-xl" : ""}`}>
+              <Link to={link_path}>
+                <img
+                  src={image}
+                  alt="banner-img"
+                  className="w-full h-full rounded-t-xl object-cover"
+                />
+              </Link>
+            </div>
+            <div
+              className={`${
+                variant === "top"
+                  ? "rounded-b-xl bg-white"
+                  : "border-b border-slate-300"
+              } h-[7rem]`}
+            >
+              <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2">
+                <Link to={link_path} className="font-bold text-lg">
+                  {short_title}
+                </Link>
+                <Link to={link_path} className="text-sm">
+                  {short_description}
+                </Link>
+              </div>
+              <div className="flex justify-between w-full px-2 items-center">
+                <Link to={link_path} className="text-slate-300 font-semibold">
+                  {short_button_text}
+                </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>
+                  <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};
@@ -93,11 +93,6 @@ export default function FamilyParentDashboard({ className, bannerList, nextDueTa
          </Link>
        </div>
      </div>
-      <HomeSliders
-        settings={settings}
-        sideData={sildeData}
-        bannerList={bannerList}
-      />
    </div>
  );
 }
@@ -93,11 +93,6 @@ export default function HomeDashboard({ className, bannerList, nextDueTask }) {
          </Link>
        </div>
      </div>
-      <HomeSliders
-        settings={settings}
-        sideData={sildeData}
-        bannerList={bannerList}
-      />
    </div>
  );
 }