maccounter

1
import Button from '@components/Button/Button'
2
import React from 'react'
3
import { useAppDispatch, useAppSelector } from '@store/hooks'
4
import clsx from 'clsx'
5
import { showComponentIf } from '@utils/showIf'
6
import { ReactComponent as CloseSvg } from '@icons/close.svg'
7
import { setModalIsActive } from '@store/app-store/appReducer'
8
import { space } from '@assets/symbols'
9
import { phoneParser } from '@utils/stringParser'
10
import classes from './Modal.module.scss'
11

12
const Modal: React.FC = () => {
13
    const isActive = useAppSelector((state) => state.app.modal.isActive)
14
    const profile = useAppSelector((state) => state.profile)
15
    const dispatch = useAppDispatch()
16
    const close = () => {
17
        dispatch(setModalIsActive(false))
18
    }
19

20
    const mainComponent = (
21
        <div className={classes.container}>
22
            <div className={clsx(
23
                'component',
24
                classes.modal,
25
            )}
26
            >
27
                <header className={classes.header}>
28
                    <div className={classes.title}>Profile</div>
29
                    <div className={classes.close} onClick={close}><CloseSvg /></div>
30
                </header>
31
                <div className={classes.body}>
32
                    <div className={classes.img}>img</div>
33
                    <div className={classes.info}>
34
                        <p>
35
                            {profile.firstName}
36
                            {space}
37
                            {profile.secondName}
38
                        </p>
39
                        <p>{profile.email}</p>
40
                        <p>{phoneParser(profile.phone)}</p>
41
                    </div>
42
                </div>
43
                <Button>Edit</Button>
44
            </div>
45
        </div>
46
    )
47
    return showComponentIf(isActive, mainComponent)
48
}
49

50
export default Modal
51