2021-01-02 22:53:06 -05:00
|
|
|
import { useMedia } from "react-media";
|
|
|
|
|
|
|
|
function useResponsiveLayout() {
|
|
|
|
const isMediumScreen = useMedia({ query: "(min-width: 500px)" });
|
|
|
|
const isLargeScreen = useMedia({ query: "(min-width: 1500px)" });
|
|
|
|
const screenSize = isLargeScreen
|
|
|
|
? "large"
|
|
|
|
: isMediumScreen
|
|
|
|
? "medium"
|
|
|
|
: "small";
|
|
|
|
|
|
|
|
const modalSize = isLargeScreen
|
|
|
|
? "842px"
|
|
|
|
: isMediumScreen
|
|
|
|
? "642px"
|
|
|
|
: "500px";
|
|
|
|
|
|
|
|
const tileSize = isLargeScreen
|
|
|
|
? "small"
|
|
|
|
: isMediumScreen
|
|
|
|
? "medium"
|
|
|
|
: "large";
|
|
|
|
|
2021-05-25 01:47:52 -04:00
|
|
|
const tileGridColumns = isLargeScreen ? 4 : isMediumScreen ? 3 : 2;
|
2021-05-08 22:04:31 -04:00
|
|
|
|
2021-05-25 01:47:52 -04:00
|
|
|
const groupGridColumns = isLargeScreen ? 3 : 2;
|
2021-05-24 03:11:46 -04:00
|
|
|
|
2021-05-23 23:34:21 -04:00
|
|
|
const tileContainerHeight = isLargeScreen ? "600px" : "400px";
|
|
|
|
|
2021-05-24 03:11:46 -04:00
|
|
|
return {
|
|
|
|
screenSize,
|
|
|
|
modalSize,
|
|
|
|
tileSize,
|
2021-05-25 01:47:52 -04:00
|
|
|
tileGridColumns,
|
2021-05-24 03:11:46 -04:00
|
|
|
tileContainerHeight,
|
2021-05-25 01:47:52 -04:00
|
|
|
groupGridColumns,
|
2021-05-24 03:11:46 -04:00
|
|
|
};
|
2021-01-02 22:53:06 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
export default useResponsiveLayout;
|