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> = ({ isFiltered, noObjectT, noObjectMatchedT, createObjectT, onCreateObject }) => {
28  return (
29    <Box
30      padding="5"
31      py="8"
32      display="flex"
33      alignItems="center"
34      flexDirection="column"
35      gap={4}
36      w="full"
37    >
38      <EmptySectionIcon
39        maxHeight="200px"
40        maxWidth="200px"
41        _dark={{
42          'path[fill="#fff"]': {
43            fill: 'gray.800',
44          },
45          'path[fill="#f2f2f2"], path[fill="#e6e6e6"], path[fill="#ccc"]': {
46            fill: 'gray.700',
47          },
48          'circle[fill="#3182CE"]': {
49            fill: 'primary.300',
50          },
51        }}
52        _light={{
53          'path[fill="#f2f2f2"], path[fill="#e6e6e6"], path[fill="#ccc"]': {
54            fill: 'gray.300',
55          },
56          'circle[fill="#3182CE"]': {
57            fill: 'primary.500',
58          },
59        }}
60      />
61      <Text fontWeight="medium" color="gray.600" _dark={{ color: 'gray.400' }}>
62        {isFiltered ? t(noObjectMatchedT) : t(noObjectT)}
63      </Text>
64      {!isFiltered && (
65        <Button
66          size="sm"
67          colorScheme="primary"
68          onClick={() => onCreateObject(true)}
69        >
70          {t(createObjectT)}
71        </Button>
72      )}
73    </Box>
74  );
75};