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

49 lines
1.1 KiB
TypeScript

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}>
<div className={styles.left}>
<BsTriangleFill
size={10}
className={styles.arrow}
/>
<div className={styles.text}>Upcoming</div>
</div>
<div className={styles.right}>36,163</div>
</div>
{recurringPaymentsDiv}
</div>
)
}