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