LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 16:43:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

(feat:hooks) update useMediaQuery

Browse Source
This commit is contained in:
ManishMadan2882
2025-05-29 04:01:47 +05:30
parent 2ca9f708a6
commit 8abc1de26d
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/hooks/index.ts
View File

@@ -35,21 +35,21 @@ export function useOutsideAlerter<T extends HTMLElement>(
export function useMediaQuery() {
const mobileQuery = '(max-width: 768px)';
const darkModeQuery = '(prefers-color-scheme: dark)'; // Detect dark mode
const desktopQuery = '(min-width: 960px)';
const tabletQuery = '(max-width: 1024px)'; // Tablet breakpoint at 1024px
const desktopQuery = '(min-width: 1025px)'; // Desktop starts after tablet
const [isMobile, setIsMobile] = useState(false);
const [isTablet, setIsTablet] = useState(false);
const [isDesktop, setIsDesktop] = useState(false);
const [isDarkMode, setIsDarkMode] = useState(false);
useEffect(() => {
const mobileMedia = window.matchMedia(mobileQuery);
const tabletMedia = window.matchMedia(tabletQuery);
const desktopMedia = window.matchMedia(desktopQuery);
const darkModeMedia = window.matchMedia(darkModeQuery);
const updateMediaQueries = () => {
setIsMobile(mobileMedia.matches);
setIsTablet(tabletMedia.matches && !mobileMedia.matches); // Tablet but not mobile
setIsDesktop(desktopMedia.matches);
setIsDarkMode(darkModeMedia.matches);
};
updateMediaQueries();
@@ -60,9 +60,9 @@ export function useMediaQuery() {
return () => {
window.removeEventListener('resize', listener);
};
}, [mobileQuery, desktopQuery, darkModeQuery]);
}, [mobileQuery, tabletQuery, desktopQuery]);
return { isMobile, isDesktop, isDarkMode };
return { isMobile, isTablet, isDesktop };
}
export function useDarkTheme() {