HelpLink.tsx

import Link from '@material-ui/core/Link'
import QuestionMarkIcon from 'assets/icons/ico/questionMark.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
import { Link as RouterLink } from 'react-router-dom'
import { useAppDispatch } from 'store/hooks'
import { openFeedbackModal } from 'store/modal/modal.slice'
import './HelpLink.scss'

const HelpLink = () => {
  const { t } = useI18n()
  const dispatch = useAppDispatch()

  return (
    <div className="help-root">
      <div className="help-content">
        <div className="help-header text-16-normal-uppercase">
          {t('help.title_help')}
        </div>
        <Link
          className="help-card-link"
          component={RouterLink}
          onClick={() => dispatch(openFeedbackModal(true))}
          to=""
        >
          <div className="card">
            <div className="help-card">
              <div className="help-card-content">
                <StyledIcon
                  className="help-card-content-icon"
                  icon={QuestionMarkIcon}
                  size={42}
                />
                <div className="help-card-content-title">
                  {t('help.read_help')}
                </div>
              </div>
            </div>
          </div>
        </Link>
      </div>
    </div>
  )
}

export default HelpLink