add viewport calculate for fileName cut

src/app/hooks/useViewport.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+export const MOBILE = 'MOBILE'
+export const TABLET = 'TABLET'
+export const DESKTOP = 'DESKTOP'
+
+const getDevice = (width: number) => {
+	if (width < 768) return MOBILE
+	else if (width < 992) return TABLET
+	else return DESKTOP
+}
+
+export function useViewport() {
+	const [viewport, setViewport] = useState({
+		width: 0,
+		device: 'DESKTOP'
+	});
+
+	useEffect(() => {
+		const handleResize = () => {
+			setViewport({
+				width: window.innerWidth,
+				device: getDevice(window.innerWidth)
+			});
+		};
+
+		handleResize();
+
+		window.addEventListener('resize', handleResize);
+		return () => window.removeEventListener('resize', handleResize);
+	}, []);
+
+	return viewport;
+}