Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 12x 12x 12x 12x 12x 12x | import React from "react";
import { useGiveNotificationContext } from "../provider/GiveNotificationProvider";
import { Box, Stack } from "@mui/material";
import {
BellIcon,
ChatsCircleIcon,
BriefcaseIcon,
StorefrontIcon,
} from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme } from "@theme/v2/Provider";
function EmptyComponent() {
const { tab, teamAccountType } = useGiveNotificationContext();
const { palette } = useAppTheme();
const componentData = {
notifications: {
Icon: BellIcon,
text: "You don’t have any notifications yet",
},
messages: {
Icon: ChatsCircleIcon,
text: "You don’t have any messages yet",
},
team: {
Icon: BellIcon,
text: "You don’t have any notifications yet",
},
provider: {
Icon: BriefcaseIcon,
text: "You don’t have any notifications from provider accounts yet",
},
merchant: {
Icon: StorefrontIcon,
text: "You don’t have any notifications from merchant accounts yet",
},
};
const key =
tab === "team" && teamAccountType.type !== "all"
? teamAccountType.type
: tab;
const { Icon, text } = componentData[key];
return (
<Stack
alignItems="center"
justifyContent="center"
height="100%"
width="100%"
data-testid="give-notification-empty-component"
>
<Box
alignItems="center"
justifyContent="center"
display="flex"
width="100%"
flexDirection="column"
gap="20px"
>
<Stack
alignItems="center"
justifyContent="center"
bgcolor={palette.primitive?.transparent["darken-5"]}
width="56px"
borderRadius="50%"
height="56px"
>
<Icon size="25px" fill={palette?.icon?.["icon-primary"]} />
</Stack>
<GiveText color="secondary" fontSize="14px">
{text}
</GiveText>
</Box>
</Stack>
);
}
export default EmptyComponent;
|