Matchu
65af7ef64c
Boom, pulled some stuff out into util! Now we also have error boundaries in both panels of the wardrobe page. You can test this one by visiting `/outfits/new?send-test-error-for-sentry`, just like on the home page! Util component for fake errors owo
51 lines
1.3 KiB
JavaScript
51 lines
1.3 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"
|
|
color="gray.50"
|
|
position="relative"
|
|
>
|
|
{previewAndControls}
|
|
</Box>
|
|
<Box gridArea="itemsAndSearch" bg={itemsAndSearchBackground}>
|
|
{itemsAndSearch}
|
|
</Box>
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default WardrobePageLayout;
|