feat: components

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

web/app/components/CenterCol.tsx

@@ -42,6 +42,42 @@ export default function CenterCol() {
         title: "Holder's Name",
         value: "Nishant Verma",
       }]
+    }, {
+      bankName: "Axis",
+      bankFullName: "Axis Bank",
+      bankLogoSrc: "/axis.svg",
+      bankAccountBalance: "55,410",
+      infoLines: [{
+        title: "Account Number",
+        value: "34536896852",
+      }, {
+        title: "IFSC Code",
+        value: "SBIN0006586",
+      }, {
+        title: "Swift BIC",
+        value: "6895206BB",
+      }, {
+        title: "Holder's Name",
+        value: "Nishant Verma",
+      }]
+    }, {
+      bankName: "ICICI",
+      bankFullName: "ICICI Bank",
+      bankLogoSrc: "/icici.svg",
+      bankAccountBalance: "7,932",
+      infoLines: [{
+        title: "Account Number",
+        value: "92531805286",
+      }, {
+        title: "IFSC Code",
+        value: "HDFC0002233",
+      }, {
+        title: "Swift BIC",
+        value: "HDFCINBBBNG",
+      }, {
+        title: "Holder's Name",
+        value: "Nishant Verma",
+      }]
     }]
   }
 

web/app/components/RecurringPayment.tsx

@@ -4,7 +4,7 @@ import styles from './recurringPayment.module.css'
 import { BsTriangleFill, BsYoutube, BsCalendar2Date } from 'react-icons/bs'
 import { RiHome7Fill } from 'react-icons/ri'
 
-export default function Upcoming() {
+export default function RecurringPayment(props) {
   return (
     <div className={styles.recurringPayment}>
       <div className={styles.recurringPaymentTop}>
@@ -13,7 +13,7 @@ export default function Upcoming() {
             className={styles.paymentIcon}
             size={50}
           />
-          <div className={styles.paymentTitle}>2586 Rent</div>
+          <div className={styles.paymentTitle}>{props.title}</div>
         </div>
         <BsCalendar2Date
           className={styles.paymentIcon}
@@ -21,8 +21,8 @@ export default function Upcoming() {
         />
       </div>
       <div className={styles.recurringPaymentBottom}>
-        <div>Due in 7 days</div>
-        <div>₹36,163 · monthly</div>
+        <div>Due in {props.due_in_days} days</div>
+        <div>₹{props.amount} · monthly</div>
       </div>
     </div>
   )

web/app/components/Upcoming.tsx

@@ -3,8 +3,34 @@ import React from 'react'
 import styles from './upcoming.module.css'
 import { BsTriangleFill } from 'react-icons/bs'
 import RecurringPayment from './RecurringPayment'
+import { RiHome7Fill } from 'react-icons/ri'
 
 export default function Upcoming() {
+  const recurringPayments = [
+    {
+      title: "2568 Rent",
+      amount: "36,163",
+      due_in_days: "7",
+    },
+    {
+      title: "YouTube Premium",
+      amount: "130",
+      due_in_days: "17",
+    },
+  ]
+  const recurringPaymentsDiv = []
+  recurringPayments.forEach((payment) => {
+    recurringPaymentsDiv.push(
+      <RecurringPayment
+        key={payment.title}
+        title={payment.title}
+        amount={payment.amount}
+        due_in_days={payment.due_in_days}
+      />
+    )
+  })
+
+
   return (
     <div className={styles.main}>
       <div className={styles.summary}>
@@ -17,8 +43,7 @@ export default function Upcoming() {
         </div>
         <div className={styles.right}>₹36,163</div>
       </div>
-      <RecurringPayment />
-      <RecurringPayment />
+      {recurringPaymentsDiv}
     </div>
   )
 }

web/app/components/bankAccount.module.css

@@ -2,7 +2,9 @@
 .main {
   background: #FFF;
   border-radius: 30px;
-  width: 100%;
+  width: 47.5%;
+  margin-top: 5%;
+  /* max-width: 600px; */
 }
 
 .bank {

web/app/components/centerCol.module.css

@@ -1,6 +1,8 @@
 
 .main {
   flex-grow: 1;
+  width: 45vw;
+  max-width: 1225px;
 }
 
 .title {
@@ -22,8 +24,9 @@
 
 .accounts {
   display: flex;
-  justify-content: space-between;
   gap: 30px;
   margin-top: 30px;
+  flex-wrap: wrap;
+  gap: 5%;
 }
 

web/app/components/recentTnx.module.css

@@ -1,6 +1,7 @@
 
 .main {
-  width: 400px;
+  width: 23vw;
+  max-width: 630px;
 }
 
 .heading {

web/app/components/recurringCol.module.css

@@ -1,6 +1,7 @@
 
 .main {
-  width: 400px;
+  width: 23vw;
+  max-width: 630px;
 }
 
 .topDiv {