Merge pull request #245 from WatchItDev/v2/responsive/placeholder

feat: handle responsive capabilities

src/App.tsx

@@ -39,6 +39,7 @@ import MotionLazy from '@src/components/animate/motion-lazy';
 import SnackbarProvider from '@src/components/snackbar/snackbar-provider';
 import { SettingsProvider, SettingsDrawer } from '@src/components/settings';
 import { AuthProvider } from '@src/auth/context/lens';
+import {ResponsiveOverlay} from "@src/components/responsive-overlay";
 
 // ----------------------------------------------------------------------
 
@@ -76,6 +77,7 @@ export default function App() {
                 <SettingsDrawer />
                 <ProgressBar />
                 <Router />
+                <ResponsiveOverlay />
               </SnackbarProvider>
             </MotionLazy>
           </ThemeProvider>

src/components/responsive-overlay/ResponsiveOverlay.tsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react';
+import { Box, Typography } from '@mui/material';
+import Image from "@src/components/image";
+import responsiveImage from '@public/assets/illustrations/working-responsive.png';
+
+const ResponsiveOverlay = () => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsSmallScreen(window.innerWidth < 1200);
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  if (!isSmallScreen) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        color: '#fff',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 2000,
+      }}
+    >
+
+      <Image src={responsiveImage} alt="Watchit App" sx={{ width: 350}} />
+      <Box sx={{ m: 4 }} />
+      <Typography variant="h6">Watchit App</Typography>
+      <Typography variant="h6">
+        We are working on making this page responsive.
+      </Typography>
+    </Box>
+  );
+};
+
+export default ResponsiveOverlay;

src/components/responsive-overlay/index.ts

@@ -0,0 +1 @@
+export { default as ResponsiveOverlay } from './ResponsiveOverlay.tsx';

tsconfig.app.json

@@ -25,6 +25,7 @@
     /* Aliases */
     "paths": {
       "@src/*": ["./src/*"],
+      "@public/*": ["./public/*"],
     }
   },
   "include": ["src"]

vite.config.ts

@@ -11,6 +11,7 @@ export default defineConfig(({ mode }) => {
     resolve: {
       alias: {
         '@src': path.resolve(__dirname, 'src'),
+        '@public': path.resolve(__dirname, 'public'),
       },
     },
     define: {