applications/drive/src/app/components/SharedPage/SharedFolderPage/EmptyPlaceholder.tsx

   1 import { c } from 'ttag';
   2
   3 import { ButtonLike } from '@proton/atoms';
   4 import { EmptyViewContainer } from '@proton/components';
   5 import { DRIVE_APP_NAME } from '@proton/shared/lib/constants';
   6 import { DRIVE_LANDING_PAGE } from '@proton/shared/lib/drive/urls';
   7 import noContentSvg from '@proton/styles/assets/img/illustrations/shared-page-empty-list.svg';
   8
   9 import { getIsPublicContext } from '../../../utils/getIsPublicContext';
  10
  11 export const EmptyPlaceholder = () => {
  12     const isPublicContext = getIsPublicContext();
  13     const emptyTitle = isPublicContext ? c('Info').t`This folder is empty` : c('Info').t`Nothing here yet`;
  14     return (
  15         <div className="flex flex-1 justify-center shared-folder-empty-placeholder-container">
  16             <EmptyViewContainer
  17                 className="p-4"
  18                 imageProps={{ src: noContentSvg, title: emptyTitle }}
  19                 data-testid="shared-folder-empty-placeholder"
  20             >
  21                 <h3 className="text-bold">{emptyTitle}</h3>
  22                 {!isPublicContext && (
  23                     <>
  24                         <p className="color-hint shared-folder-empty-placeholder-text">
  25                             {c('Info').t`Need to share a file? Then get ${DRIVE_APP_NAME},
  26                         the safest way to share, store, and sync your files.`}
  27                         </p>
  28                         <div className="flex justify-center">
  29                             <ButtonLike color="norm" shape="outline" as="a" href={DRIVE_LANDING_PAGE} target="_blank">
  30                                 {c('Action').t`Get ${DRIVE_APP_NAME}`}
  31                             </ButtonLike>
  32                         </div>
  33                     </>
  34                 )}
  35             </EmptyViewContainer>
  36         </div>
  37     );
  38 };