refactor: create hook screen type (instead of using plain media queries)

inertia/hooks/viewport/use_media_query.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(false);
+
+  const handleMediaChange = () => setMatches(getMediaMatches(query));
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+    handleMediaChange();
+
+    matchMedia.addEventListener('change', handleMediaChange);
+    return () => matchMedia.removeEventListener('change', handleMediaChange);
+  }, [query]);
+
+  return matches;
+}
+
+function getMediaMatches(query: string): boolean {
+  if (typeof window !== 'undefined') {
+    return window.matchMedia(query).matches;
+  }
+  return false;
+}

inertia/hooks/viewport/use_screen_type.tsx

@@ -0,0 +1,9 @@
+import { Theme } from '@emotion/react';
+import { useMediaQuery } from '~/hooks/viewport/use_media_query';
+import { media } from '~/styles/media_queries';
+
+type ScreenTypes = keyof Theme['media'];
+const useScreenType = (screen: ScreenTypes) =>
+  useMediaQuery(`(max-width: ${media[screen]})`);
+
+export default useScreenType;