packages/components/containers/contacts/selector/ContactSelectorEmptyContacts.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import noContactsImg from '@proton/styles/assets/img/illustrations/no-contacts.svg';
   5 import noop from '@proton/utils/noop';
   6
   7 import type { ContactEditProps } from '../edit/ContactEditModal';
   8
   9 interface Props {
  10     onClose?: () => void;
  11     onEdit: (props: ContactEditProps) => void;
  12 }
  13
  14 const ContactSelectorEmptyContacts = ({ onEdit, onClose = noop }: Props) => {
  15     const title = c('Error message').t`No results found`;
  16
  17     const handleClick = () => {
  18         onEdit({});
  19         onClose();
  20     };
  21
  22     return (
  23         <div className="flex flex-column items-center flex-1 p-2">
  24             <span className="mb-4">{c('Error message')
  25                 .t`You do not have any contact yet. Start by creating a new contact`}</span>
  26             <img src={noContactsImg} alt={title} className="p-4 mb-4" />
  27             <Button color="norm" onClick={handleClick}>{c('Action').t`Create new contact`}</Button>
  28         </div>
  29     );
  30 };
  31
  32 export default ContactSelectorEmptyContacts;