Skip to content
Snippets Groups Projects
NoDataModal.tsx 2 KiB
Newer Older
  • Learn to ignore specific revisions
  • Bastien DUMONT's avatar
    Bastien DUMONT committed
    import { Button, IconButton } from '@material-ui/core'
    
    import Dialog from '@material-ui/core/Dialog'
    import CloseIcon from 'assets/icons/ico/close.svg'
    import QuestionIcon from 'assets/icons/ico/questionMark.svg'
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    import { useI18n } from 'cozy-ui/transpiled/react/I18n'
    
    import Icon from 'cozy-ui/transpiled/react/Icon'
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    import React from 'react'
    
    import './noDataModal.scss'
    
    interface NoDataModalProps {
      open: boolean
      handleCloseClick: () => void
    }
    
    
    Bastien DUMONT's avatar
    Bastien DUMONT committed
    const NoDataModal = ({ open, handleCloseClick }: NoDataModalProps) => {
    
      const { t } = useI18n()
    
      return (
        <Dialog
          open={open}
          onClose={handleCloseClick}
    
          aria-labelledby="accessibility-title"
    
          classes={{
            root: 'modal-root',
            paper: 'modal-paper',
          }}
        >
    
          <div id="accessibility-title">
    
            {t('consumption_visualizer.modal.window_title')}
          </div>
          <IconButton
            aria-label={t('consumption_visualizer.modal.close')}
            className="modal-paper-close-button"
            onClick={handleCloseClick}
          >
            <Icon icon={CloseIcon} size={16} />
          </IconButton>
          <div className="nodata-modal">
            <div className="question-mark">
              <Icon icon={QuestionIcon} size={36} />
            </div>
    
            <div className="text-20-normal title">
              {t('consumption_visualizer.why_no_data')}
            </div>
            <div className="text-16-normal">
              {t('consumption_visualizer.dataModal.list_title')}
            </div>
    
            <ul>
              <li>{t('consumption_visualizer.dataModal.item1')}</li>
              <li>{t('consumption_visualizer.dataModal.item2')}</li>
              <li>{t('consumption_visualizer.dataModal.item3')}</li>
              <li>{t('consumption_visualizer.dataModal.item4')}</li>
            </ul>
    
            <Button
              aria-label={t('ecogesture_info_modal.button_close')}
              onClick={handleCloseClick}
    
              className="btnPrimary"
    
            >
              {t('ecogesture_info_modal.button_close')}
            </Button>
          </div>
        </Dialog>
      )
    }
    
    export default NoDataModal