applications/drive/src/app/components/sections/SharedLinks/EmptyShared.tsx

   1 import type { FC } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { PrimaryButton } from '@proton/components';
   6 import noLinksSvg from '@proton/styles/assets/img/illustrations/empty-shared.svg';
   7
   8 import { DriveEmptyView } from '../../layout/DriveEmptyView';
   9 import { useFileSharingModal } from '../../modals/SelectLinkToShareModal/SelectLinkToShareModal';
  10 import { useLinkSharingModal } from '../../modals/ShareLinkModal/ShareLinkModal';
  11
  12 type Props = {
  13     shareId?: string;
  14 };
  15
  16 const EmptyShared: FC<Props> = ({ shareId }) => {
  17     const [fileSharingModal, showFileSharingModal] = useFileSharingModal();
  18     const [linkSharingModal, showLinkSharingModal] = useLinkSharingModal();
  19
  20     const onShareFile = () => {
  21         if (shareId) {
  22             void showFileSharingModal({ shareId, showLinkSharingModal });
  23         }
  24     };
  25
  26     return (
  27         <DriveEmptyView
  28             image={noLinksSvg}
  29             title={
  30                 // translator: Shown on empty Shared page
  31                 c('Info').t`Share files with links`
  32             }
  33             subtitle={
  34                 // translator: Shown on empty Shared page
  35                 c('Info').t`Create links and share your files with others.`
  36             }
  37             dataTestId="shared-links-empty-placeholder"
  38         >
  39             <div className="flex justify-center">
  40                 <PrimaryButton
  41                     size="large"
  42                     className="text-bold w-custom"
  43                     style={{ '--w-custom': '13em' }}
  44                     onClick={onShareFile}
  45                 >
  46                     {c('Action').t`Share file`}
  47                 </PrimaryButton>
  48             </div>
  49             {fileSharingModal}
  50             {linkSharingModal}
  51         </DriveEmptyView>
  52     );
  53 };
  54
  55 export default EmptyShared;