All files / app/utils useIsScreenSizeOrSmaller.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Breakpoint, useMediaQuery } from "@mui/material";
import { theme } from "theme";
 
export type Screensize =
  // 600 px
  | "smallMobile"
  // 900 px
  | "mobile"
  // 1200 px
  | "tablet";
 
const themeSizes = {
  smallMobile: "sm" as Breakpoint,
  mobile: "md" as Breakpoint,
  tablet: "lg" as Breakpoint,
};
 
export default function useIsScreenSizeOrSmaller(size: Screensize) {
  return useMediaQuery(theme.breakpoints.down(themeSizes[size]));
}