robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
samuel.fm
1import {useMemo} from 'react'
2import {useMediaQuery} from 'react-responsive'
3
4export type Breakpoint = 'gtPhone' | 'gtMobile' | 'gtTablet'
5
6export function useBreakpoints(): Record<Breakpoint, boolean> & {
7 activeBreakpoint: Breakpoint | undefined
8} {
9 const gtPhone = useMediaQuery({minWidth: 500})
10 const gtMobile = useMediaQuery({minWidth: 800})
11 const gtTablet = useMediaQuery({minWidth: 1300})
12 return useMemo(() => {
13 let active: Breakpoint | undefined
14 if (gtTablet) {
15 active = 'gtTablet'
16 } else if (gtMobile) {
17 active = 'gtMobile'
18 } else if (gtPhone) {
19 active = 'gtPhone'
20 }
21 return {
22 activeBreakpoint: active,
23 gtPhone,
24 gtMobile,
25 gtTablet,
26 }
27 }, [gtPhone, gtMobile, gtTablet])
28}
29
30/**
31 * Fine-tuned breakpoints for the shell layout
32 */
33export function useLayoutBreakpoints() {
34 const rightNavVisible = useMediaQuery({minWidth: 1100})
35 const centerColumnOffset = useMediaQuery({minWidth: 1100, maxWidth: 1300})
36 const leftNavMinimal = useMediaQuery({maxWidth: 1300})
37
38 return {
39 rightNavVisible,
40 centerColumnOffset,
41 leftNavMinimal,
42 }
43}