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 | 18x 18x 18x 18x 18x 1702x 842x | import { Box } from "@mui/material";
import { styled } from "@theme/v2/Provider";
import {
ArrowClockwiseIcon,
BankIcon,
ExportIcon,
FunnelSimpleIcon,
StorefrontIcon,
} from "@phosphor-icons/react";
export const ACTION_KEYS = {
invite: "invite",
filter: "filter",
export: "export",
refresh: "refresh",
bank: "bank",
} as const;
export const ACTIONS_ICONS = {
[ACTION_KEYS.refresh]: ArrowClockwiseIcon,
[ACTION_KEYS.filter]: FunnelSimpleIcon,
[ACTION_KEYS.export]: ExportIcon,
[ACTION_KEYS.bank]: BankIcon,
[ACTION_KEYS.invite]: StorefrontIcon,
};
export const MOBILE_ACTIONS_ICONS = {
...ACTIONS_ICONS,
[ACTION_KEYS.export]: ExportIcon,
};
export const ACTIONS = {
[ACTION_KEYS.invite]: {
id: ACTION_KEYS.invite,
label: "Invite Merchants",
icon: <ACTIONS_ICONS.invite />,
},
[ACTION_KEYS.filter]: {
id: ACTION_KEYS.filter,
label: "Filter",
icon: <ACTIONS_ICONS.filter />,
},
[ACTION_KEYS.export]: {
id: ACTION_KEYS.export,
label: "Export",
icon: <ACTIONS_ICONS.export />,
},
[ACTION_KEYS.refresh]: {
id: ACTION_KEYS.refresh,
label: "Refresh",
icon: <ACTIONS_ICONS.refresh />,
},
[ACTION_KEYS.bank]: {
id: ACTION_KEYS.bank,
label: "Bank Accounts",
icon: <ACTIONS_ICONS.bank />,
},
};
export const Container = styled(Box, {
shouldForwardProp: (prop) => prop !== "isMobileView",
})<{ isMobileView?: boolean }>(({ isMobileView }) => ({
display: "flex",
gap: "16px",
alignItems: "center",
paddingX: "20px",
...(isMobileView && {
"& > div": {
width: "fit-content",
flexGrow: 1,
},
}),
"& .MuiFormControl-root": {
paddingX: "0 !important",
},
}));
|