1
 2import { Box, Text, Button, chakra } from '@chakra-ui/react';
 3import { FC } from 'react';
 4import { ReactComponent as AddFileIcon } from 'assets/add_file.svg';
 5import { t } from 'i18next';
 6
 7type EmptySectionProps = {
 8  isFiltered: boolean;
 9  noObjectMatchedT: string;
10  noObjectT: string;
11  createObjectT: string;
12  onCreateObject?: (isOpen: boolean) => void;
13};
14
15const EmptySectionIcon = chakra(AddFileIcon);
16
17/**
18 * Component to provide visual feedback for the result of table filtering
19 * and table emptiness
20 *
21 * @param noObjectMatchedT - i18n token for "No <object> where Matched"
22 * @param noObjectT - i18n token for "No <object> where found"
23 * @param createObjectT - i18n token for "Create <object>" Button
24 * @param onCreateObject - Create object event handler on click
25 *
26 */
27export const EmptySection: FC<EmptySectionProps> = ({
28  isFiltered, noObjectT, noObjectMatchedT, createObjectT, onCreateObject
29}) => {
30  return (
31    <Box
32      padding="5"
33      py="8"
34      display="flex"
35      alignItems="center"
36      flexDirection="column"
37      gap={4}
38      w="full"
39    >
40      <EmptySectionIcon
41        maxHeight="200px"
42        maxWidth="200px"
43        _dark={{
44          'path[fill="#fff"]': {
45            fill: 'gray.800',
46          },
47          'path[fill="#f2f2f2"], path[fill="#e6e6e6"], path[fill="#ccc"]': {
48            fill: 'gray.700',
49          },
50          'circle[fill="#3182CE"]': {
51            fill: 'primary.300',
52          },
53        }}
54        _light={{
55          'path[fill="#f2f2f2"], path[fill="#e6e6e6"], path[fill="#ccc"]': {
56            fill: 'gray.300',
57          },
58          'circle[fill="#3182CE"]': {
59            fill: 'primary.500',
60          },
61        }}
62      />
63      <Text fontWeight="medium" color="gray.600" _dark={{ color: 'gray.400' }}>
64        {isFiltered ? t(noObjectMatchedT) : t(noObjectT)}
65      </Text>
66      {(!isFiltered && onCreateObject !== undefined) && (
67        <Button
68          size="sm"
69          colorScheme="primary"
70          onClick={() => onCreateObject(true)}
71        >
72          {t(createObjectT)}
73        </Button>
74      )}
75    </Box>
76  );
77};