1  import { t } from '@lingui/macro';
 2  import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 3  import { ReactNode } from 'react';
 4  
 5  type NoSearchResultsProps = {
 6    searchTerm?: string;
 7    subtitle?: ReactNode;
 8  };
 9  
10  export const NoSearchResults: React.FC<NoSearchResultsProps> = ({ searchTerm, subtitle }) => {
11    const { breakpoints } = useTheme();
12    const sm = useMediaQuery(breakpoints.down('sm'));
13  
14    return (
15      <Box
16        sx={{
17          display: 'flex',
18          flexDirection: 'column',
19          alignItems: 'center',
20          gap: 1,
21          pt: 15,
22          pb: 32,
23          px: 4,
24        }}
25      >
26        {sm ? (
27          <Box sx={{ textAlign: 'center', maxWidth: '300px' }}>
28            <Typography variant="h2">{t`No search results${searchTerm && ' for'}`}</Typography>
29            {searchTerm && (
30              <Typography sx={{ overflowWrap: 'anywhere' }} variant="h2">
31                &apos;{searchTerm}&apos;
32              </Typography>
33            )}
34          </Box>
35        ) : (
36          <Typography
37            sx={{ textAlign: 'center', maxWidth: '480px', overflowWrap: 'anywhere' }}
38            variant="h2"
39          >
40            {t`No search results${searchTerm && ` for \'${searchTerm}\'`}`}
41          </Typography>
42        )}
43        {subtitle && (
44          <Typography
45            sx={{ width: '280px', textAlign: 'center' }}
46            variant="description"
47            color="text.secondary"
48          >
49            {subtitle}
50          </Typography>
51        )}
52      </Box>
53    );
54  };