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 | 2x 44x 44x 44x 2x 44x | import { ReceiptIcon, TagIcon } from "@phosphor-icons/react";
import GiveEmptyState from "@shared/EmptyState/GiveEmptyState";
import { CampaignEmptyStateSection } from "../types";
import { GiveEmptyStateType } from "@shared/EmptyState/types";
import { useAppTheme } from "@theme/v2/Provider";
import ChartBarIcon from "@assets/iconsV2/ChartBarIcon";
interface Props {
section: CampaignEmptyStateSection;
}
const PanelEmptyState = ({ section }: Props) => {
const { palette } = useAppTheme();
const stateProps = stateData(palette.icon?.["icon-primary"] as string)[
section
];
return (
<GiveEmptyState
{...stateProps}
sx={{ flexGrow: 1, height: "144px", gap: "20px" }}
iconContainerSx={{
width: "56px",
height: "56px",
bgcolor: palette.primitive?.transparent["darken-5"],
}}
/>
);
};
export default PanelEmptyState;
const stateData = (
fill: string,
): Record<CampaignEmptyStateSection, GiveEmptyStateType> => {
return {
latestPurchases: {
Icon: <ReceiptIcon size={24} />,
title: {
secondary: "You don’t have any purchases",
},
},
latestTransactions: {
Icon: <ReceiptIcon size={24} />,
title: {
secondary: "No transaction yet",
},
},
inventory: {
Icon: <TagIcon size={24} />,
title: {
secondary: "You don’t have any inventory",
},
},
chart: {
Icon: <ChartBarIcon size={24} fill={fill} />,
title: {
secondary: "No data to show yet",
},
},
};
};
|