Matchu
81b2a2b4a2
We add jsbuilding-rails to get esbuild running in the app, and then we copy-paste the files we need from impress-2020 into here! I stopped at the point where it was building successfully, but it's not running correctly: it's not sure about `process.env` in `next`, and I think the right next step is to delete the NextJS deps altogether and use React Router instead.
67 lines
1.8 KiB
JavaScript
67 lines
1.8 KiB
JavaScript
import React from "react";
|
|
import { Box, Grid, useColorModeValue, useToken } from "@chakra-ui/react";
|
|
import { useCommonStyles } from "../util";
|
|
|
|
function WardrobePageLayout({
|
|
previewAndControls = null,
|
|
itemsAndMaybeSearchPanel = null,
|
|
searchFooter = null,
|
|
}) {
|
|
const itemsAndSearchBackground = useColorModeValue("white", "gray.900");
|
|
const searchBackground = useCommonStyles().bodyBackground;
|
|
const searchShadowColorValue = useToken("colors", "gray.400");
|
|
|
|
return (
|
|
<Box
|
|
position="absolute"
|
|
top="0"
|
|
bottom="0"
|
|
left="0"
|
|
right="0"
|
|
// Create a stacking context, so that our drawers and modals don't fight
|
|
// with the z-indexes in here!
|
|
zIndex="0"
|
|
>
|
|
<Grid
|
|
templateAreas={{
|
|
base: `"previewAndControls"
|
|
"itemsAndMaybeSearchPanel"`,
|
|
md: `"previewAndControls itemsAndMaybeSearchPanel"
|
|
"searchFooter searchFooter"`,
|
|
}}
|
|
templateRows={{
|
|
base: "minmax(100px, 45%) minmax(300px, 55%)",
|
|
md: "minmax(300px, 1fr) auto",
|
|
}}
|
|
templateColumns={{
|
|
base: "100%",
|
|
md: "50% 50%",
|
|
}}
|
|
height="100%"
|
|
width="100%"
|
|
>
|
|
<Box
|
|
gridArea="previewAndControls"
|
|
bg="gray.900"
|
|
color="gray.50"
|
|
position="relative"
|
|
>
|
|
{previewAndControls}
|
|
</Box>
|
|
<Box gridArea="itemsAndMaybeSearchPanel" bg={itemsAndSearchBackground}>
|
|
{itemsAndMaybeSearchPanel}
|
|
</Box>
|
|
<Box
|
|
gridArea="searchFooter"
|
|
bg={searchBackground}
|
|
boxShadow={`0 0 8px ${searchShadowColorValue}`}
|
|
display={{ base: "none", md: "block" }}
|
|
>
|
|
{searchFooter}
|
|
</Box>
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default WardrobePageLayout;
|