Merge pull request #132 from shreyas1434shinde/main

popup added better experience desktop view

package.json

@@ -38,6 +38,7 @@
     "next-transpile-modules": "^10.0.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-toastify": "^10.0.6",
     "reflect-metadata": "^0.1.13",
     "svg2img": "^1.0.0-beta.2",
     "url": "^0.11.3",

src/components/Layout.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Box } from "@mui/material";
 import Sidebar from "./SideBar";
+import { toast, ToastContainer } from "react-toastify";
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -9,8 +10,34 @@ interface LayoutProps {
 }
 
 const Layout: React.FC<LayoutProps> = ({ children, selectedKey, onSelect }) => {
+  const [toastShown, setToastShown] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768 && !toastShown) {
+        toast.info("For a better experience, please use a desktop.", {
+          position: "top-center",
+          autoClose: false,
+          hideProgressBar: true,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+        });
+        setToastShown(true); // Mark toast as shown
+      }
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [toastShown]);
   return (
     <Box display="flex" sx={{ overflowX: 'hidden !important' }} minHeight={"100vh"}>
+      <ToastContainer position="bottom-left" autoClose={3000} stacked={false} />
       <Box sx={{ maxHeight: '132vh', minHeight: '100vh', '@media (max-width: 900px)': { position: 'absolute', top:"3px" }, '@media (min-width: 900px)': { background: "linear-gradient(to bottom, white, #F8EFDA)", position:'fixed' } }}>
         <Sidebar selectedKey={selectedKey} onSelect={onSelect} />
       </Box>

src/pages/_app.tsx

@@ -7,10 +7,16 @@ import "../styles/global.css";
 
 import { AppProps } from "next/app";
 import customTheme from "@/styles/CustomTheme";
+import { useEffect, useState } from "react";
+import { toast, ToastContainer } from "react-toastify";
 
 export default function App({ Component, pageProps }: AppProps) {
+
+
+
   return (
     <CssVarsProvider theme={customTheme}>
+      <ToastContainer position="bottom-left" autoClose={3000} stacked={false} />
       <Component {...pageProps} />;
     </CssVarsProvider>
   );

src/pages/workspace/content/create/index.tsx

@@ -127,7 +127,7 @@ const CreatePage = () => {
         >
           <Grid container spacing={2}>
             {cardData.map((card, index) => (
-              <Grid item xs={12} sm={6} md={4} lg={4} xl={3} key={index}>
+              <Grid item xs={12} sm={6} md={4} lg={4} xl={4} key={index}>
                 <Paper
                   key={index}
                   elevation={3}