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

   1 import { c } from 'ttag';
   2
   3 import UnderlineButton from '@proton/components/components/button/UnderlineButton';
   4 import noResultsImg from '@proton/styles/assets/img/illustrations/empty-search.svg';
   5
   6 interface Props {
   7     query?: string;
   8     onClearSearch: () => void;
   9 }
  10
  11 const ContactSelectorEmptyResults = ({ query = '', onClearSearch }: Props) => {
  12     const title = c('Error message').t`No results found for "${query}"`;
  13     const button = (
  14         <UnderlineButton key="button" className="text-bold p-0" onClick={onClearSearch}>
  15             {c('Action').t`clear it`}
  16         </UnderlineButton>
  17     );
  18
  19     return (
  20         <div className="flex flex-column items-center flex-1 p-2">
  21             <h2>{title}</h2>
  22             <img src={noResultsImg} alt={title} className="px-4 pb-4 mb-4" />
  23             <span>{c('Info').jt`You can either update your search query or ${button}`}</span>
  24         </div>
  25     );
  26 };
  27 export default ContactSelectorEmptyResults;