53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
|
|
import React from 'react'
|
|
import styles from './recurringPayment.module.css'
|
|
import { BsTriangleFill, BsYoutube, BsCalendar2Date } from 'react-icons/bs'
|
|
import { RiHome7Fill, RiBillLine } from 'react-icons/ri'
|
|
|
|
export default function RecurringPayment(props) {
|
|
const renderIcon = (icon_type) => {
|
|
const iconSize = 50
|
|
|
|
if (icon_type == "rent") {
|
|
return (
|
|
<RiHome7Fill
|
|
className={styles.paymentIcon}
|
|
size={iconSize}
|
|
/>
|
|
)
|
|
} else if (icon_type == "youtube") {
|
|
return (
|
|
<BsYoutube
|
|
className={styles.paymentIcon}
|
|
size={iconSize}
|
|
/>
|
|
)
|
|
}
|
|
return (
|
|
<RiBillLine
|
|
className={styles.paymentIcon}
|
|
size={iconSize}
|
|
/>
|
|
)
|
|
}
|
|
|
|
|
|
return (
|
|
<div className={styles.recurringPayment}>
|
|
<div className={styles.recurringPaymentTop}>
|
|
<div className={styles.recurringPaymentTopLeft}>
|
|
{renderIcon(props.icon_type)}
|
|
<div className={styles.paymentTitle}>{props.title}</div>
|
|
</div>
|
|
<BsCalendar2Date
|
|
className={styles.paymentIcon}
|
|
size={50}
|
|
/>
|
|
</div>
|
|
<div className={styles.recurringPaymentBottom}>
|
|
<div>Due in {props.due_in_days} days</div>
|
|
<div>₹{props.amount} · {props.frequency}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|