add tablet small

Author: StackOverflowIsBetterThanAnyAI

src/hooks/useScreenWidth.ts

@@ -1,14 +1,20 @@
 import { useEffect, useState } from 'react'
 
-export const useScreenWidth = (): 'MOBILE' | 'TABLET' | 'DESKTOP' => {
+export const useScreenWidth = ():
+    | 'MOBILE'
+    | 'TABLET_SMALL'
+    | 'TABLET'
+    | 'DESKTOP' => {
     const [screenWidth, setScreenWidth] = useState<
-        'MOBILE' | 'TABLET' | 'DESKTOP'
+        'MOBILE' | 'TABLET_SMALL' | 'TABLET' | 'DESKTOP'
     >('MOBILE')
 
     useEffect(() => {
         const handleScreenWidth = () => {
             if (window.innerWidth < 640) {
                 setScreenWidth('MOBILE')
+            } else if (window.innerWidth < 768) {
+                setScreenWidth('TABLET_SMALL')
             } else if (window.innerWidth < 1024) {
                 setScreenWidth('TABLET')
             } else setScreenWidth('DESKTOP')