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 | 9x 110x 110x 1x 1x 17x 110x | import { Box, Stack } from "@mui/material";
import { QuestionIcon } from "@phosphor-icons/react";
import GiveButton from "@shared/Button/GiveButton";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import { styled, useAppTheme } from "@theme/v2/Provider";
import { IHandleNavigation } from "../types";
import GiveCircularProgress from "@shared/GiveCircularProgress";
import { PagesContainer } from "../pages/pages.atoms";
interface Props {
currentIndex: number;
isLoading: boolean;
handleNavigation: IHandleNavigation;
buttonText: string;
}
export const NavigationFooter = ({
currentIndex,
handleNavigation,
isLoading,
buttonText,
}: Props) => {
const theme = useAppTheme();
return (
<StickyFooter width="100%">
<PagesContainer
sx={{
flexDirection: "row",
justifyContent: "space-between",
}}
py="11px"
>
<GiveIconButton
Icon={QuestionIcon}
size="large"
variant="ghost"
data-testid="onboarding-support-button"
sx={{
padding: 0,
margin: 0,
}}
onClick={() => {
window.open(process.env.VITE_MERCHANT_SUPPORT, "_blank");
}}
/>
<Stack gap="12px" flexDirection="row" alignItems="center">
{currentIndex > 0 && (
<GiveButton
label="Back"
size="large"
variant="ghost"
onClick={() => handleNavigation("back")}
/>
)}
<GiveButton
label={buttonText}
size="large"
variant="filled"
disabled={isLoading}
loading={isLoading}
onClick={() =>
handleNavigation(buttonText === "Start" ? "start" : "next")
}
/>
</Stack>
</PagesContainer>
</StickyFooter>
);
};
const StickyFooter = styled(Box)(({ theme }) => ({
position: "sticky",
bottom: 0,
background: theme.palette.surface?.["primary-transparent"],
backdropFilter: "blur(15px)",
borderTop: `1px solid ${theme.palette.border?.primary}`,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}));
|