maccounter
62 строки · 1.7 Кб
1import React from 'react'
2import clsx from 'clsx'
3import Column from '@components/Table/Column/Column'
4import Row from '@components/Table/Row/Row'
5import Rows from '@components/Table/Rows/Rows'
6import { ReactComponent as DotsSvg } from '@icons/dots.svg'
7import { ReactComponent as AddSvg } from '@icons/add.svg'
8import { ruble, space } from '@assets/symbols'
9import { WidgetProps } from '@components/Widget/WidgetProps'
10import { ExpensesInitialState } from '@store/expenses-store/expensesInitialState'
11import { v4 as createId } from 'uuid'
12import styles from './Widget.module.scss'
13
14const mapDataToRow = (data: ExpensesInitialState) => data.map((el) => {
15const cardNumber = `****${el.card.number.slice(-4)}`
16const sum = el.sumOfExpenses.toLocaleString()
17return (
18<Row key={createId()}>
19<Column className={styles.card}>
20<p className={styles.cardTitle}>{el.card.title}</p>
21<p className={styles.cardNumber}>{cardNumber}</p>
22</Column>
23<Column className={styles.sum}>
24<p>
25{sum}
26{space}
27{ruble}
28</p>
29</Column>
30<Column className={styles.dots}>
31<DotsSvg />
32</Column>
33</Row>
34)
35})
36
37const Widget: React.FC<WidgetProps> = ({
38title,
39expenses,
40}) => (
41<div className={clsx(
42'component',
43styles.container,
44)}
45>
46<div className={clsx(
47'txt--title-small',
48styles.title,
49)}
50>
51<p>
52{title}
53</p>
54<AddSvg />
55</div>
56<Rows>
57{mapDataToRow(expenses)}
58</Rows>
59</div>
60)
61
62export default Widget
63