link-stack/apps/leafcutter/components/Layout.tsx
2023-06-05 14:48:23 +00:00

74 lines
2 KiB
TypeScript

import { FC, PropsWithChildren } from "react";
import getConfig from "next/config";
import { Grid, Container } from "@mui/material";
import CookieConsent from "react-cookie-consent";
import { useCookies } from "react-cookie";
import { TopNav } from "./TopNav";
import { Sidebar } from "./Sidebar";
import { GettingStartedDialog } from "./GettingStartedDialog";
import { useAppContext } from "./AppProvider";
// import { Footer } from "./Footer";
export const Layout: FC<PropsWithChildren> = ({ children }) => {
const [cookies, setCookie] = useCookies(["cookieConsent"]);
const consentGranted = cookies.cookieConsent === "true";
/*
const {
publicRuntimeConfig: { embedded },
} = getConfig();
*/
const embedded = true;
const {
colors: {
white,
almostBlack,
leafcutterElectricBlue,
cdrLinkOrange,
helpYellow,
},
} = useAppContext();
return (
<>
<Grid container direction="column">
{!embedded && (
<Grid item>
<TopNav />
</Grid>
)}
{!embedded && <Sidebar open />}
<Grid
item
sx={{ mt: embedded ? 0 : "100px", ml: embedded ? 0 : "310px" }}
>
<Container sx={{ padding: 2 }}>{children}</Container>
</Grid>
</Grid>
{!consentGranted ? (
<CookieConsent
style={{
zIndex: 1500,
backgroundColor: helpYellow,
color: almostBlack,
borderTop: `1px solid ${leafcutterElectricBlue}`,
}}
onAccept={() => setCookie("cookieConsent", "true", { path: "/" })}
buttonStyle={{
borderRadius: 500,
backgroundColor: cdrLinkOrange,
color: white,
textTransform: "uppercase",
padding: "10px 20px",
fontWeight: "bold",
fontSize: 14,
}}
>
Leafcutter uses cookies for core funtionality.
</CookieConsent>
) : null}
<GettingStartedDialog />
</>
);
};