From d6a9a4464d501c5ca551e96b5e441553a3296454 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Mon, 17 Apr 2023 13:27:49 +1200
Subject: [PATCH] feat(ui): Add Basic useResolution Component

This component just classifies `base` and `sm` as mobile, `md` and `lg` as tablet and `xl` and `2xl` as desktop.

This is a basic hook for quicker work with resolutions. Can be modified and adjusted to our needs. All resolution related work can go into this hook.
---
 .../web/src/common/hooks/useResolution.ts      | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 invokeai/frontend/web/src/common/hooks/useResolution.ts

diff --git a/invokeai/frontend/web/src/common/hooks/useResolution.ts b/invokeai/frontend/web/src/common/hooks/useResolution.ts
new file mode 100644
index 0000000000..96b95ee074
--- /dev/null
+++ b/invokeai/frontend/web/src/common/hooks/useResolution.ts
@@ -0,0 +1,18 @@
+import { useBreakpoint } from '@chakra-ui/react';
+
+export default function useResolution():
+  | 'mobile'
+  | 'tablet'
+  | 'desktop'
+  | 'unknown' {
+  const breakpointValue = useBreakpoint();
+
+  const mobileResolutions = ['base', 'sm'];
+  const tabletResolutions = ['md', 'lg'];
+  const desktopResolutions = ['xl', '2xl'];
+
+  if (mobileResolutions.includes(breakpointValue)) return 'mobile';
+  if (tabletResolutions.includes(breakpointValue)) return 'tablet';
+  if (desktopResolutions.includes(breakpointValue)) return 'desktop';
+  return 'unknown';
+}