impress/app/javascript/wardrobe-2020/WardrobePage/WardrobePageLayout.js

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;