From f947e0b0fd63df1acff645f1106ca0ee025116f3 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 14 Dec 2022 19:19:28 -0800
Subject: [PATCH] Add container query hook

---
 .../src/features/home/routes/home-route.tsx   |  3 ++-
 packages/renderer/src/hooks/index.ts          |  1 +
 .../renderer/src/hooks/use-container-query.ts | 21 +++++++++++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 packages/renderer/src/hooks/use-container-query.ts

diff --git a/packages/renderer/src/features/home/routes/home-route.tsx b/packages/renderer/src/features/home/routes/home-route.tsx
index 333445ef4..57f64b08c 100644
--- a/packages/renderer/src/features/home/routes/home-route.tsx
+++ b/packages/renderer/src/features/home/routes/home-route.tsx
@@ -3,10 +3,11 @@ import { AlbumListSort, SortOrder } from '/@/api/types';
 import { GridCarousel, PageHeader, ScrollArea, TextTitle } from '/@/components';
 import { useAlbumList } from '/@/features/albums';
 import { useRecentlyPlayed } from '/@/features/home/queries/recently-played-query';
-import { AnimatedPage, useContainerQuery } from '/@/features/shared';
+import { AnimatedPage } from '/@/features/shared';
 import { AppRoute } from '/@/router/routes';
 import { useSetState } from '@mantine/hooks';
 import { throttle } from 'lodash';
+import { useContainerQuery } from '/@/hooks';
 
 const HomeRoute = () => {
   const rootElement = document.querySelector(':root') as HTMLElement;
diff --git a/packages/renderer/src/hooks/index.ts b/packages/renderer/src/hooks/index.ts
index 177735d6a..131e3819b 100644
--- a/packages/renderer/src/hooks/index.ts
+++ b/packages/renderer/src/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './use-theme';
 export * from './use-is-mounted';
 export * from './use-should-pad-titlebar';
+export * from './use-container-query';
diff --git a/packages/renderer/src/hooks/use-container-query.ts b/packages/renderer/src/hooks/use-container-query.ts
new file mode 100644
index 000000000..8cde23a4e
--- /dev/null
+++ b/packages/renderer/src/hooks/use-container-query.ts
@@ -0,0 +1,21 @@
+import { useElementSize } from '@mantine/hooks';
+
+interface UseContainerQueryProps {
+  lg?: number;
+  md?: number;
+  sm?: number;
+  xl?: number;
+}
+
+export const useContainerQuery = (props?: UseContainerQueryProps) => {
+  const { lg, md, sm, xl } = props || {};
+  const { ref, width, height } = useElementSize();
+
+  const isXs = width >= 0;
+  const isSm = width >= (sm || 600);
+  const isMd = width >= (md || 900);
+  const isLg = width >= (lg || 1200);
+  const isXl = width >= (xl || 1500);
+
+  return { height, isLg, isMd, isSm, isXl, isXs, ref, width };
+};