81a7e5d62e
* esm * wip * wip * wip * wip * wip * wip * subscription notice * wip * wip * wip * fix envs * fix: update docker build * fix * esm/types * delete dashboard :D * add patches to dockerfiles * update packages + catalogs + ts * wip * remove native libs * ts * improvements * fix redirects and fetching session * try fix favicon * fixes * fix * order and resize reportds within a dashboard * improvements * wip * added userjot to dashboard * fix * add op * wip * different cache key * improve date picker * fix table * event details loading * redo onboarding completely * fix login * fix * fix * extend session, billing and improve bars * fix * reduce price on 10M
33 lines
1015 B
TypeScript
33 lines
1015 B
TypeScript
import { useMediaQuery } from 'react-responsive';
|
|
// import type { ScreensConfig } from 'tailwindcss/types/config';
|
|
|
|
// TODO: Ensure we have same breakpoints as tailwind
|
|
// const breakpoints = theme?.screens ?? {
|
|
const breakpoints = {
|
|
xs: '480px',
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
};
|
|
|
|
type ScreensConfig = typeof breakpoints;
|
|
|
|
export function useBreakpoint<K extends string>(breakpointKey: K) {
|
|
const breakpointValue = breakpoints[breakpointKey as keyof ScreensConfig];
|
|
const bool = useMediaQuery({
|
|
query: `(max-width: ${breakpointValue as string})`,
|
|
});
|
|
const capitalizedKey =
|
|
breakpointKey[0]?.toUpperCase() + breakpointKey.substring(1);
|
|
|
|
type KeyAbove = `isAbove${Capitalize<K>}`;
|
|
type KeyBelow = `isBelow${Capitalize<K>}`;
|
|
|
|
return {
|
|
[breakpointKey]: Number(String(breakpointValue).replace(/[^0-9]/g, '')),
|
|
[`isAbove${capitalizedKey}`]: !bool,
|
|
[`isBelow${capitalizedKey}`]: bool,
|
|
} as Record<K, number> & Record<KeyAbove | KeyBelow, boolean>;
|
|
}
|