packages/components/containers/contacts/widget/ContactsWidgetSettingsContainerImport.tsx

   1 import { c } from 'ttag';
   2
   3 import { EASY_SWITCH_SOURCES } from '@proton/activation/src/interface';
   4 import Label from '@proton/components/components/label/Label';
   5
   6 import ImportCsvContactButton from './ImportCsvContactButton';
   7
   8 interface Props {
   9     onImport: () => void;
  10     onClose?: () => void;
  11 }
  12
  13 const ContactsWidgetSettingsContainerImport = ({ onImport, onClose }: Props) => (
  14     <>
  15         <Label htmlFor="import-contacts-button" className="text-semibold">
  16             <span role="heading" aria-level={2}>{c('Label').t`Import contacts`}</span>
  17         </Label>
  18
  19         <p className="color-weak mt-2 mb-4">
  20             {c('Info')
  21                 .t`CSV files from Outlook, Outlook Express, Yahoo! Mail, Hotmail, Eudora and some other apps as well as vCard 3.1 and 4.0 formats (UTF-8 encoding) are supported.`}
  22         </p>
  23
  24         <ImportCsvContactButton
  25             source={EASY_SWITCH_SOURCES.CONTACTS_WEB_SETTINGS}
  26             onImport={onImport}
  27             onClose={onClose}
  28         />
  29     </>
  30 );
  31
  32 export default ContactsWidgetSettingsContainerImport;