SplashScreen.tsx

import logoLoading from 'assets/anims/logoLoading.gif'
import logos from 'assets/png/logos_partenaires.svg'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { InitSteps } from 'models/initialisationSteps.model'
import React from 'react'
import './splashScreen.scss'

interface SplashScreenProps {
  initStep: InitSteps
}
const SplashScreen: React.FC<SplashScreenProps> = ({
  initStep,
}: SplashScreenProps) => {
  const { t } = useI18n()
  const getProgress = () => {
    const total: number = Object.values(InitSteps).length / 2
    const progress: number =
      initStep === 0 ? 10 : Math.round((initStep / total) * 100)
    return progress
  }
  return (
    <>
      <div className="splash-content">
        <div className="splash-loader">
          <img src={logoLoading} alt="Chargement" />
          <span>Ecolyo</span>
          <div className="splash-progress">
            <div className="splash-progress-bar-container">
              <div
                className="splash-progress-bar-content"
                style={{ width: `${getProgress()}%` }}
              ></div>
            </div>
          </div>
        </div>
        <div className="step-label text-18-normal">
          {t(`splashscreen.step.${initStep}`)}
        </div>
        <div className="splash-logos-container">
          <img src={logos} alt="ensemble de logos" />
        </div>
      </div>
    </>
  )
}

export default SplashScreen