maccounter

1
import React from 'react'
2
import clsx from 'clsx'
3
import Column from '@components/Table/Column/Column'
4
import Row from '@components/Table/Row/Row'
5
import Rows from '@components/Table/Rows/Rows'
6
import { ReactComponent as DotsSvg } from '@icons/dots.svg'
7
import { ReactComponent as AddSvg } from '@icons/add.svg'
8
import { ruble, space } from '@assets/symbols'
9
import { WidgetProps } from '@components/Widget/WidgetProps'
10
import { ExpensesInitialState } from '@store/expenses-store/expensesInitialState'
11
import { v4 as createId } from 'uuid'
12
import styles from './Widget.module.scss'
13

14
const mapDataToRow = (data: ExpensesInitialState) => data.map((el) => {
15
    const cardNumber = `****${el.card.number.slice(-4)}`
16
    const sum = el.sumOfExpenses.toLocaleString()
17
    return (
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

37
const Widget: React.FC<WidgetProps> = ({
38
    title,
39
    expenses,
40
}) => (
41
    <div className={clsx(
42
        'component',
43
        styles.container,
44
    )}
45
    >
46
        <div className={clsx(
47
            'txt--title-small',
48
            styles.title,
49
        )}
50
        >
51
            <p>
52
                {title}
53
            </p>
54
            <AddSvg />
55
        </div>
56
        <Rows>
57
            {mapDataToRow(expenses)}
58
        </Rows>
59
    </div>
60
)
61

62
export default Widget
63