packages/components/containers/onboarding/OnboardingDiscoverApps.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import {
   5     BRAND_NAME,
   6     CALENDAR_SHORT_APP_NAME,
   7     DRIVE_SHORT_APP_NAME,
   8     MAIL_SHORT_APP_NAME,
   9     PASS_SHORT_APP_NAME,
  10     VPN_SHORT_APP_NAME,
  11 } from '@proton/shared/lib/constants';
  12 import onboardingDiscover from '@proton/styles/assets/img/onboarding/discover.svg';
  13
  14 import type { Props as OnboardingContentProps } from './OnboardingContent';
  15 import OnboardingContent from './OnboardingContent';
  16 import OnboardingStep from './OnboardingStep';
  17 import type { OnboardingStepRenderCallback } from './interface';
  18
  19 interface Props extends Omit<OnboardingContentProps, 'decription' | 'img'>, OnboardingStepRenderCallback {}
  20
  21 const OnboardingDiscoverApps = (props: Props) => {
  22     return (
  23         <OnboardingStep>
  24             <OnboardingContent
  25                 title={c('Onboarding Proton').t`Discover all ${BRAND_NAME} services`}
  26                 description={c('Onboarding Proton')
  27                     .t`Use the app selector in the top left to access all ${BRAND_NAME} services: ${MAIL_SHORT_APP_NAME}, ${VPN_SHORT_APP_NAME}, ${CALENDAR_SHORT_APP_NAME}, ${DRIVE_SHORT_APP_NAME} and ${PASS_SHORT_APP_NAME}.`}
  28                 img={
  29                     <img src={onboardingDiscover} alt={c('Onboarding Proton').t`Discover all ${BRAND_NAME} services`} />
  30                 }
  31                 {...props}
  32             />
  33             <footer className="flex flex-nowrap">
  34                 <Button size="large" className="mr-4" fullWidth onClick={props.onBack}>{c('Action').t`Back`}</Button>
  35                 <Button size="large" color="norm" fullWidth onClick={props.onNext}>
  36                     {c('Action').t`Get started`}
  37                 </Button>
  38             </footer>
  39         </OnboardingStep>
  40     );
  41 };
  42
  43 export default OnboardingDiscoverApps;