packages/components/containers/mobile/MobileAppSettingsSection.tsx

   1 import { c } from 'ttag';
   2
   3 import { Href } from '@proton/atoms';
   4 import QRCode from '@proton/components/components/image/QRCode';
   5 import Logo from '@proton/components/components/logo/Logo';
   6 import {
   7     CALENDAR_APP_NAME,
   8     CALENDAR_MOBILE_APP_LINKS,
   9     MAIL_APP_NAME,
  10     MAIL_MOBILE_APP_LINKS,
  11 } from '@proton/shared/lib/constants';
  12 import appStoreSvg from '@proton/styles/assets/img/illustrations/app-store.svg';
  13 import playStoreSvg from '@proton/styles/assets/img/illustrations/play-store.svg';
  14
  15 type SupportedAPPS = 'proton-mail' | 'proton-calendar';
  16
  17 interface ProductCardProps {
  18     qrCodeLink: string;
  19     app: SupportedAPPS;
  20     appStoreLink: string;
  21     playStoreLink: string;
  22 }
  23
  24 const ProductDownloadCard = ({ app, qrCodeLink, appStoreLink, playStoreLink }: ProductCardProps) => {
  25     const appName = app === 'proton-mail' ? MAIL_APP_NAME : CALENDAR_APP_NAME;
  26
  27     return (
  28         <section className="flex flex-column gap-6 items-center border rounded-lg p-6 text-center align-center">
  29             <div
  30                 className="border rounded p-1.5 h-custom w-custom"
  31                 style={{ '--h-custom': '7.5rem', '--w-custom': '7.5rem' }}
  32             >
  33                 <QRCode value={qrCodeLink} />
  34             </div>
  35             <div>
  36                 <Logo appName={app} variant="glyph-only" size={12} />
  37                 <h3 className="text-bold text-4xl">{appName}</h3>
  38             </div>
  39             <div className="flex gap-2">
  40                 <Href href={appStoreLink} target="_blank">
  41                     <img
  42                         className="h-custom"
  43                         style={{ '--h-custom': '2.25rem' }}
  44                         src={appStoreSvg}
  45                         // translator: Shows the app name such as: Proton Mail on App Store. Only supports Proton Mail and Proton Calendar
  46                         alt={c('Get started checklist instructions').t`${appName} on App Store`}
  47                     />
  48                 </Href>
  49                 <Href href={playStoreLink} target="_blank">
  50                     <img
  51                         className="h-custom"
  52                         style={{ '--h-custom': '2.25rem' }}
  53                         src={playStoreSvg}
  54                         // translator: Shows the app name such as: Proton Mail on Play Store. Only supports Proton Mail and Proton Calendar
  55                         alt={c('Get started checklist instructions').t`${appName} on Play Store`}
  56                     />
  57                 </Href>
  58             </div>
  59         </section>
  60     );
  61 };
  62
  63 const MobileAppSecttingsSection = () => {
  64     return (
  65         <div className="flex gap-6 mt-3">
  66             <ProductDownloadCard
  67                 app="proton-mail"
  68                 qrCodeLink={MAIL_MOBILE_APP_LINKS.qrCode}
  69                 appStoreLink={MAIL_MOBILE_APP_LINKS.appStore}
  70                 playStoreLink={MAIL_MOBILE_APP_LINKS.playStore}
  71             />
  72             <ProductDownloadCard
  73                 app="proton-calendar"
  74                 qrCodeLink={CALENDAR_MOBILE_APP_LINKS.qrCode}
  75                 appStoreLink={CALENDAR_MOBILE_APP_LINKS.appStore}
  76                 playStoreLink={CALENDAR_MOBILE_APP_LINKS.playStore}
  77             />
  78         </div>
  79     );
  80 };
  81
  82 export default MobileAppSecttingsSection;