41 lines
865 B
JavaScript
41 lines
865 B
JavaScript
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";
|
|
|
|
const tileGridColumns = isLargeScreen ? 4 : isMediumScreen ? 3 : 2;
|
|
|
|
const groupGridColumns = isLargeScreen ? 3 : 2;
|
|
|
|
const tileContainerHeight = isLargeScreen ? "600px" : "400px";
|
|
|
|
return {
|
|
screenSize,
|
|
modalSize,
|
|
tileSize,
|
|
tileGridColumns,
|
|
tileContainerHeight,
|
|
groupGridColumns,
|
|
};
|
|
}
|
|
|
|
export default useResponsiveLayout;
|