applications/drive/src/app/components/sections/Photos/EmptyPhotos.tsx

   1 import type { FC } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Href } from '@proton/atoms';
   6 import { DRIVE_APP_NAME } from '@proton/shared/lib/constants';
   7 import { DRIVE_ANDROID_APP, DRIVE_IOS_APP } from '@proton/shared/lib/drive/urls';
   8 import appStoreSvg from '@proton/styles/assets/img/illustrations/app-store.svg';
   9 import emptyPhotosSvg from '@proton/styles/assets/img/illustrations/empty-photos.svg';
  10 import playStoreSvg from '@proton/styles/assets/img/illustrations/play-store.svg';
  11
  12 import { DriveEmptyView } from '../../layout/DriveEmptyView';
  13
  14 type Props = {};
  15
  16 export const EmptyPhotos: FC<Props> = () => {
  17     return (
  18         <DriveEmptyView
  19             image={emptyPhotosSvg}
  20             title={
  21                 // translator: Shown as a call to action when there are no photos synced
  22                 c('Info').t`Ready to add some photos?`
  23             }
  24             subtitle={
  25                 // translator: Shown as a call to action when there are no photos synced
  26                 c('Info').t`Get the app to backup photos from your phone.`
  27             }
  28         >
  29             <div className="mt-10 flex items-center justify-center gap-4" data-testid="photos-empty-page:mobile-apps">
  30                 <Href href={DRIVE_ANDROID_APP}>
  31                     <img width="140" src={playStoreSvg} alt={c('Info').t`${DRIVE_APP_NAME} on Play Store`} />
  32                 </Href>
  33                 <Href href={DRIVE_IOS_APP}>
  34                     <img width="140" src={appStoreSvg} alt={c('Info').t`${DRIVE_APP_NAME} on App Store`} />
  35                 </Href>
  36             </div>
  37         </DriveEmptyView>
  38     );
  39 };