58 lines
1.3 KiB
JavaScript
58 lines
1.3 KiB
JavaScript
import React from "react";
|
|
import { Grid, useThemeUI } from "theme-ui";
|
|
import SimpleBar from "simplebar-react";
|
|
|
|
import { useGroup } from "../../contexts/GroupContext";
|
|
import { ADD_TO_MAP_ID } from "../../contexts/TileDragContext";
|
|
|
|
import useResponsiveLayout from "../../hooks/useResponsiveLayout";
|
|
|
|
import Droppable from "../drag/Droppable";
|
|
|
|
function TilesContainer({ children }) {
|
|
const { onGroupSelect } = useGroup();
|
|
|
|
const { theme } = useThemeUI();
|
|
|
|
const layout = useResponsiveLayout();
|
|
|
|
return (
|
|
<>
|
|
<SimpleBar
|
|
style={{
|
|
height: layout.tileContainerHeight,
|
|
backgroundColor: theme.colors.muted,
|
|
}}
|
|
onClick={() => onGroupSelect()}
|
|
>
|
|
<Grid
|
|
p={3}
|
|
pb={4}
|
|
sx={{
|
|
borderRadius: "4px",
|
|
overflow: "hidden",
|
|
position: "relative",
|
|
}}
|
|
gap={2}
|
|
columns={`repeat(${layout.tileGridColumns}, 1fr)`}
|
|
>
|
|
<Droppable
|
|
id={ADD_TO_MAP_ID}
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
zIndex: -1,
|
|
}}
|
|
/>
|
|
{children}
|
|
</Grid>
|
|
</SimpleBar>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default TilesContainer;
|