applications/drive/src/app/components/modals/MoveToFolderModal/EmptyFileTreePlaceholder.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import noContentSvg from '@proton/styles/assets/img/illustrations/empty-folder.svg';
   5
   6 interface Props {
   7     onCreate: () => void;
   8 }
   9
  10 const EmptyFileTreePlaceholder = ({ onCreate }: Props) => {
  11     const title = c('Title').t`You have no folders yet`;
  12     return (
  13         <div className="p-4 flex flex-column items-center w-full">
  14             <img src={noContentSvg} alt={title} className="p-4 mb-4 w-1/2" />
  15             <h2 className="text-bold">{title}</h2>
  16             <p className="m-0">{c('Info').t`Create your first folder and start moving your files.`}</p>
  17             <div className="my-8 flex flex-column w-custom" style={{ '--w-custom': '13em' }}>
  18                 <Button size="large" color="norm" className="mx-4 mt-1 text-strong" onClick={onCreate}>
  19                     {c('Action').t`Create`}
  20                 </Button>
  21             </div>
  22         </div>
  23     );
  24 };
  25
  26 export default EmptyFileTreePlaceholder;