Added new pages to dashboard

2024-03-23 17:03:13 +01:00
parent 07f7a90c0d
commit ea4e6b7a59
23 changed files with 743 additions and 313 deletions
@@ -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<DashBoardCardProps> = ({
+  title,
+  desc,
+  onClick,
+  cardClass,
+  titleClass,
+  descClass,
+  descSpan,
+  descSpanClass,
+  btnTitle,
+  btnTextClass,
+  image,
+  imgClass,
+}) => {
+  return (
+    <div
+      className={`h-full w-full rounded-lg p-5 shadow-lg hover:shadow-none bg-no-repeat bg-[90%] flex justify-between gap-4 items-center transition-all duration-300 ${
+        cardClass && cardClass
+      }`}
+      // onClick={onClick}
+    >
+      <div className="w-3/4 flex flex-col gap-[2.3125rem]">
+        {title && (
+          <h1
+            className={`mb-1 text-[#FFF] text-lg text-left font-bold ${
+              titleClass && titleClass
+            }`}
+          >
+            {title}
+          </h1>
+        )}
+        {desc && (
+          <p className={`text-lg text-left ${descClass && descClass}`}>
+            {desc}{" "}
+            {descSpan && (
+              <span className={`${descSpanClass && descSpanClass}`}>
+                {descSpan}
+              </span>
+            )}
+          </p>
+        )}
+        {btnTitle && (
+          <Button className={btnTextClass} text={btnTitle} onClick={onClick} />
+        )}
+      </div>
+      {image && <img className={imgClass} src={image} alt="card-image" />}
+    </div>
+  );
+};
+
+interface DashboardHomeIntroProps {
+  handleNextStep: any;
+}
+
+const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep }) => {
+  return (
+    <>
+      <h1 className="font-bold my-5 text-2xl">Hello, Olanrewaju</h1>
+      <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
+        <DashBoardCard
+          cardClass="bg-[#5C2684] relative"
+          desc="Begin your application and get up to "
+          descSpan="5 million naira loan."
+          descClass="leading-[1.5625rem] text-lg text-white"
+          descSpanClass="font-bold"
+          btnTitle="Apply here"
+          btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
+          image={NairaBag}
+          imgClass="translate-y-4 -rotate-6"
+          onClick={handleNextStep}
+        />
+      </div>
+    </>
+  );
+};
+
+export default DashboardHomeIntro;
+
+//  {/* <div className="group w-full lg:w-96 h-32">
+//         <DefaultCard
+//           descText="You currently do not have any open application. Click on apply for a loan to get started."
+//           iconName="arrow"
+//           iconColor="#FBB700"
+//           cardClass={`p-4 bg-[#FFFAFA] border border-[#EE4040]`}
+//           descTextClass="text-[#423131] leading-5"
+//           onClick={() => {
+//             console.log("working");
+//           }}
+//         />
+//       </div> */}
+
+//       {/* <div className="w-full mt-20 flex gap-16 flex-wrap">
+//         <div className="group h-40 w-full lg:w-80">
+//           <DefaultCard
+//             title="Apply for a loan"
+//             descText="You currently do not have any open application. Click on apply for a loan to get started."
+//             iconName="greater-than"
+//             iconColor="#FFF"
+//             cardClass={`bg-[#5C2684] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
+//             titleClass="text-[#FFF]"
+//             descTextClass="text-[#EFEFEF] leading-5"
+//             onClick={() => {
+//               console.log("working");
+//             }}
+//           />
+//         </div>
+//         <div className="group h-40 w-full lg:w-80">
+//           <DefaultCard
+//             title="Loan history"
+//             descText="You currently do not have any open application. Click on apply for a loan to get started."
+//             iconName="greater-than"
+//             iconColor="#FFF"
+//             cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
+//             titleClass="text-[#FFF]"
+//             descTextClass="text-[#EFEFEF] leading-5"
+//             onClick={() => {
+//               console.log("working");
+//             }}
+//           />
+//         </div>
+//         <div className="group h-40 w-full lg:w-80">
+//           <DefaultCard
+//             title="How it works?"
+//             descText="Steps to follow to complete your loan application successfully."
+//             iconName="greater-than"
+//             iconColor="#FFF"
+//             cardClass={`bg-[#635D4D] bg-[url('../../../src/assets/images/dashboard/card_bg.png')]`}
+//             titleClass="text-[#FFF]"
+//             descTextClass="text-[#EFEFEF] leading-5"
+//             onClick={() => {
+//               console.log("working");
+//             }}
+//           />
+//         </div>
+//       </div> */}