testnet-onboarding-app/src/layout/Layout.tsx

35 lines
969 B
TypeScript

import { Button, Typography } from "@mui/material";
import React, { PropsWithChildren } from "react";
import { Container } from "../components/Container";
import { ArrowBack } from "@mui/icons-material";
import { useNavigate } from "react-router-dom";
export const Layout: React.FC<
PropsWithChildren<{
title: string;
backLinkTitle?: string;
noBackButton?: boolean;
}>
> = ({ children, title, backLinkTitle = "Home", noBackButton = false }) => {
const navigate = useNavigate();
return (
<Container boxProps={{ sx: { backgroundColor: "inherit", padding: 0 } }}>
{noBackButton ? null : (
<Button
startIcon={<ArrowBack />}
color="info"
sx={{ mb: 4 }}
onClick={() => navigate("/")}
>
{backLinkTitle}
</Button>
)}
<Typography variant="h4" sx={{ mb: 4 }}>
{title}
</Typography>
<Container>{children}</Container>
</Container>
);
};