| 1 | "use client"; |
| 2 | |
| 3 | import { useCallback, useSyncExternalStore |
| 4 | |
| 5 | const BREAKPOINTS = { |
| 6 | "2xl": 1536, |
| 7 | "3xl": 1600, |
| 8 | "4xl": 2000, |
| 9 | lg: 1024, |
| 10 | md: 800, |
| 11 | sm: 640, |
| 12 | xl: 1280, |
| 13 | } as const; |
| 14 | |
| 15 | type Breakpoint |
| 16 | |
| 17 | type BreakpointQuery |
| 18 | |
| 19 | function resolveMin(value: |
| 20 | const px = |
| 21 | return `(min-width: ${px |
| 22 | } |
| 23 | |
| 24 | function resolveMax(value: |
| 25 | const px = |
| 26 | return `(max-width: ${px |
| 27 | } |
| 28 | |
| 29 | function parseQuery(query: |
| 30 | if (typeof query |
| 31 | const parts: |
| 32 | if (query.min |
| 33 | if (query.max |
| 34 | if (query.pointer |
| 35 | if (query.pointer |
| 36 | if (parts.length |
| 37 | return parts.join |
| 38 | } |
| 39 | |
| 40 | if (query.startsWith |
| 41 | |
| 42 | const parts: |
| 43 | for (const segment |
| 44 | if (segment.startsWith |
| 45 | const bp = |
| 46 | if (bp in |
| 47 | } else if (segment |
| 48 | parts.push(resolveMin |
| 49 | } |
| 50 | } |
| 51 | |
| 52 | return parts.length |
| 53 | } |
| 54 | |
| 55 | function getServerSnapshot(): boolean |
| 56 | return false; |
| 57 | } |
| 58 | |
| 59 | export type MediaQueryInput |
| 60 | min?: Breakpoint |
| 61 | max?: Breakpoint |
| 62 | /** Touch-like input (finger). Use "fine" for mouse/trackpad. */ |
| 63 | pointer?: " |
| 64 | }; |
| 65 | |
| 66 | export function useMediaQuery(query |
| 67 | const mediaQuery = |
| 68 | |
| 69 | const subscribe = |
| 70 | (callback: () |
| 71 | if (typeof window |
| 72 | const mql = |
| 73 | mql.addEventListener("change |
| 74 | return () => |
| 75 | }, |
| 76 | [mediaQuery], |
| 77 | ); |
| 78 | |
| 79 | const getSnapshot = |
| 80 | if (typeof window |
| 81 | return window.matchMedia |
| 82 | }, [mediaQuery]); |
| 83 | |
| 84 | return useSyncExternalStore(subscribe |
| 85 | } |
| 86 | |
| 87 | export function useIsMobile(): |
| 88 | return useMediaQuery("max-md |
| 89 | } |