Matchu
2403bd813a
I'm moving the preview and controls stuff closer together in the code, to clear the way to change `OutfitPreview` into a `useOutfitPreview` hook here!
46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
import React from "react";
|
|
import { Box, Grid, useColorModeValue } from "@chakra-ui/react";
|
|
|
|
function WardrobePageLayout({ previewAndControls, itemsAndSearch }) {
|
|
const itemsAndSearchBackground = useColorModeValue("white", "gray.900");
|
|
|
|
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"
|
|
"itemsAndSearch"`,
|
|
lg: `"previewAndControls itemsAndSearch"`,
|
|
}}
|
|
templateRows={{
|
|
base: "minmax(100px, 45%) minmax(300px, 55%)",
|
|
lg: "100%",
|
|
}}
|
|
templateColumns={{
|
|
base: "100%",
|
|
lg: "50% 50%",
|
|
}}
|
|
height="100%"
|
|
width="100%"
|
|
>
|
|
<Box gridArea="previewAndControls" bg="gray.900" position="relative">
|
|
{previewAndControls}
|
|
</Box>
|
|
<Box gridArea="itemsAndSearch" bg={itemsAndSearchBackground}>
|
|
{itemsAndSearch}
|
|
</Box>
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default WardrobePageLayout;
|