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