wakenbyWork

.phone {
  $self: &;
  
  display: flex;
  gap: 10px;

  &--test {
    #{$self}__link {
      color: red !important;
    }
  }
}

import styles from './Phone.module.scss'
import classNames from 'classnames'

const Phone = () => {
    const mode = 'test'
    
    const clazz = classNames({
        [styles['phone']]: true,
        [styles['phone--test']]: mode === 'test'
    })

    return (
        <div className={clazz}>
            <Link to={'tel:88005553555'} className={styles.phone__icon}>
                <img src={'/images/svg/phone.svg'} alt="Иконка телефона" />
            </Link>

            <Link to={'tel:88005553555'} className={styles.phone__link}>+7 (495) 648 90 55</Link>
        </div>
    )
}

export default Phone

const Phone = () => {
    const mode = 'test'

    const clazz = classNames({
        [styles['phone']]: true,
        [styles['phone--test']]: mode === 'test'
    })

    return (
        <Link to={'tel:88005553555'} className={clazz}>
            <img className={styles.phone__icon} src={'/images/svg/phone.svg'} alt="Иконка телефона" />

            <div className={styles.phone__link}>+7 (495) 648 90 55</div>
        </Link>
    )
}