pull/595/head
Tim Pechersky 2022-04-21 19:31:46 +01:00
rodzic d09754ecc7
commit a0b858ccbf
1 zmienionych plików z 141 dodań i 0 usunięć

Wyświetl plik

@ -0,0 +1,141 @@
import React, { useState, useEffect, useLayoutEffect } from "react";
import { Flex, useMediaQuery, Stack } from "@chakra-ui/react";
import { DEFAULT_METATAGS, AWS_ASSETS_PATH } from "../core/constants";
import { getLayout as getSiteLayout } from "./index";
const assets = {
background720: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
background1920: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
background2880: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
background3840: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
};
const InfoPageLayout = ({ children }) => {
const [background, setBackground] = useState("background720");
const [backgroundLoaded720, setBackgroundLoaded720] = useState(false);
const [backgroundLoaded1920, setBackgroundLoaded1920] = useState(false);
const [backgroundLoaded2880, setBackgroundLoaded2880] = useState(false);
const [backgroundLoaded3840, setBackgroundLoaded3840] = useState(false);
const [
isLargerThan720px,
isLargerThan1920px,
isLargerThan2880px,
isLargerThan3840px,
] = useMediaQuery([
"(min-width: 720px)",
"(min-width: 1920px)",
"(min-width: 2880px)",
"(min-width: 3840px)",
]);
useEffect(() => {
assets["background720"] = `${AWS_ASSETS_PATH}/blog-background-720x405.png`;
assets[
"background1920"
] = `${AWS_ASSETS_PATH}/blog-background-1920x1080.png`;
assets[
"background2880"
] = `${AWS_ASSETS_PATH}/blog-background-2880x1620.png`;
assets[
"background3840"
] = `${AWS_ASSETS_PATH}/blog-background-3840x2160.png`;
}, []);
useLayoutEffect(() => {
if (backgroundLoaded3840) {
setBackground("background3840");
} else if (backgroundLoaded2880) {
setBackground("background2880");
} else if (backgroundLoaded1920) {
setBackground("background1920");
} else {
setBackground("background720");
}
}, [
isLargerThan720px,
isLargerThan1920px,
isLargerThan2880px,
isLargerThan3840px,
backgroundLoaded720,
backgroundLoaded1920,
backgroundLoaded2880,
backgroundLoaded3840,
]);
useLayoutEffect(() => {
const imageLoader720 = new Image();
imageLoader720.src = `${AWS_ASSETS_PATH}/blog-background-720x405.png`;
imageLoader720.onload = () => {
setBackgroundLoaded720(true);
};
}, []);
useLayoutEffect(() => {
const imageLoader1920 = new Image();
imageLoader1920.src = `${AWS_ASSETS_PATH}/blog-background-1920x1080.png`;
imageLoader1920.onload = () => {
setBackgroundLoaded1920(true);
};
}, []);
useLayoutEffect(() => {
const imageLoader2880 = new Image();
imageLoader2880.src = `${AWS_ASSETS_PATH}/blog-background-2880x1620.png`;
imageLoader2880.onload = () => {
setBackgroundLoaded2880(true);
};
}, []);
useLayoutEffect(() => {
const imageLoader3840 = new Image();
imageLoader3840.src = `${AWS_ASSETS_PATH}/blog-background-3840x2160.png`;
imageLoader3840.onload = () => {
setBackgroundLoaded3840(true);
};
}, []);
const margin = 0;
return (
<Flex
bgPos="bottom"
bgColor="transparent"
bgSize="cover"
backgroundImage={`url(${assets[`${background}`]})`}
minH="100vh"
direction="column"
alignItems="center"
w="100%"
>
<Stack
mx={margin}
my={[4, 6, 12]}
maxW="1700px"
textAlign="justify"
minH={"100vh"}
>
{children}
</Stack>
</Flex>
);
};
export const getLayout = (page) =>
getSiteLayout(<InfoPageLayout>{page}</InfoPageLayout>);
export const getLayoutProps = () => {
const assetPreload = Object.keys(assets).map((key) => {
return {
rel: "preload",
href: assets[key],
as: "image",
};
});
const preconnects = [{ rel: "preconnect", href: "https://s3.amazonaws.com" }];
const preloads = assetPreload.concat(preconnects);
return {
props: { metaTags: { ...DEFAULT_METATAGS }, preloads },
};
};
export default InfoPageLayout;