Emi Matchu
0e314482f7
I haven't been running Prettier consistently on things in this project. Now, it's quick-runnable, and I've got it on everything! Also, I just think tabs are the right default for this kind of thing, and I'm glad to get to switch over to it! (In `package.json`.)
67 lines
1.6 KiB
JavaScript
67 lines
1.6 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;
|