foldbank-mock/web/app/components/CenterCol.tsx
Ameya Shenoy b911b667cc
feat: components
Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
2023-03-18 20:20:45 +05:30

111 lines
2.6 KiB
TypeScript

import styles from './centerCol.module.css'
import React from 'react'
import Dashboard from './Dashboard'
import BankAccount from './BankAccount'
export default function CenterCol() {
const bankDetails = {
banks: [{
bankName: "SBI",
bankFullName: "State Bank of India",
bankLogoSrc: "/sbi.svg",
bankAccountBalance: "27,932",
infoLines: [{
title: "Account Number",
value: "34536896852",
}, {
title: "IFSC Code",
value: "SBIN0006586",
}, {
title: "Swift BIC",
value: "6895206BB",
}, {
title: "Holder's Name",
value: "Nishant Verma",
}]
}, {
bankName: "HDFC",
bankFullName: "HDFC Bank",
bankLogoSrc: "/hdfc.svg",
bankAccountBalance: "2,58,630",
infoLines: [{
title: "Account Number",
value: "92531805286",
}, {
title: "IFSC Code",
value: "HDFC0002233",
}, {
title: "Swift BIC",
value: "HDFCINBBBNG",
}, {
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",
}]
}]
}
const bankAccounts = []
bankDetails.banks.forEach((bank) => {
bankAccounts.push(
<BankAccount
key={bank.bankName}
bankLogoSrc={bank.bankLogoSrc}
bankName={bank.bankName}
bankFullName={bank.bankFullName}
bankAccountBalance={bank.bankAccountBalance}
infoLines={bank.infoLines}
/>
)
})
return (
<div className={styles.main}>
<div className={styles.title}>
<div className={styles.greeting}>Good morning, Nishant</div>
<div className={styles.date}>It's 3rd of January, a Monday</div>
</div>
<Dashboard />
<div className={styles.accounts}>
{bankAccounts}
</div>
</div>
)
}