76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
|
|
import React from 'react'
|
|
import styles from './singleTnx.module.css'
|
|
import { MdFastfood, MdOutlineLocalGroceryStore } from 'react-icons/md';
|
|
import { BiDrink } from 'react-icons/bi';
|
|
import { GiKnifeFork } from 'react-icons/gi';
|
|
import { FaCarAlt } from 'react-icons/fa';
|
|
import { SiSwiggy, SiNetflix } from 'react-icons/si';
|
|
|
|
export default function SingleTransaction(props) {
|
|
const renderIcon = (icon_type) => {
|
|
if (icon_type == "drink") {
|
|
return (
|
|
<BiDrink
|
|
className={styles.icon}
|
|
size={28}
|
|
/>
|
|
)
|
|
} else if (icon_type == "groceries") {
|
|
return (
|
|
<MdOutlineLocalGroceryStore
|
|
className={styles.icon}
|
|
size={28}
|
|
/>
|
|
)
|
|
} else if (icon_type == "food") {
|
|
return (
|
|
<GiKnifeFork
|
|
className={styles.icon}
|
|
size={28}
|
|
/>
|
|
)
|
|
} else if (icon_type == "transport") {
|
|
return (
|
|
<FaCarAlt
|
|
className={styles.icon}
|
|
size={28}
|
|
/>
|
|
)
|
|
} else if (icon_type == "swiggy") {
|
|
return (
|
|
<SiSwiggy
|
|
className={styles.icon}
|
|
size={28}
|
|
/>
|
|
)
|
|
} else if (icon_type == "netflix") {
|
|
return (
|
|
<SiNetflix
|
|
className={styles.icon}
|
|
size={28}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={styles.tnx}>
|
|
<div className={styles.tnxHeading}>
|
|
<div className={styles.tnxTitle}>{props.title}</div>
|
|
<div className={styles.date}>{props.datetime}</div>
|
|
</div>
|
|
<div className={styles.tnxInfo}>
|
|
<div className={styles.cost}>
|
|
<div className={styles.minus}>-</div>
|
|
<div className={styles.rupee}>₹</div>
|
|
<div className={styles.amount}>{props.amount}</div>
|
|
</div>
|
|
<div className={styles.tag}>
|
|
{renderIcon(props.icon_type)}
|
|
{props.tag}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|