add device change

Author: sparrow-js

components/App.tsx

@@ -10,6 +10,8 @@ import {
   FaUndo,
   FaCopy,
   FaChevronLeft,
+  FaLaptopCode,
+  FaMobileAlt,
 } from "react-icons/fa";
 
 import { AiFillCodepenCircle } from "react-icons/ai";
@@ -25,7 +27,7 @@ import toast from "react-hot-toast";
 import {UploadFileContext} from './contexts/UploadFileContext';
 import {SettingContext} from './contexts/SettingContext';
 import {HistoryContext} from './contexts/HistoryContext';
-import {EditorContext} from './contexts/EditorContext';
+import {EditorContext, deviceType} from './contexts/EditorContext';
 import NativePreview from './components/NativeMobile';
 import { TemplateContext } from './contexts/TemplateContext';
 import UpdateChatInput from './components/chatInput/Update';
@@ -78,7 +80,7 @@ function App() {
   const {settings, setSettings, initCreate, setInitCreate, initCreateText, setInitCreateText} = useContext(SettingContext);
 
   const {history, addHistory,  currentVersion, setCurrentVersion, resetHistory, updateHistoryCode} = useContext(HistoryContext);
-  const { enableEdit, setEnableEdit } = useContext(EditorContext)
+  const { enableEdit, setEnableEdit, device, setDevice } = useContext(EditorContext)
   const [tabValue, setTabValue] = useState<string>(settings.generatedCodeConfig == GeneratedCodeConfig.REACT_NATIVE ? 'native' : 'desktop')
   const [ template, setTemplate ] = useState<any>({});
   const [openDialog, setOpenDialog] = useState<boolean>(false);
@@ -520,6 +522,25 @@ ${error.stack}
                   >
                     <FaDownload />
                   </span>
+                  <span
+                    className="hover:bg-slate-200 rounded-sm w-[36px] h-[36px] flex items-center justify-center border-black border-2"
+                    onClick={() => {
+                      if (device === deviceType.PC) {
+                        setDevice(deviceType.MOBILE)
+                      } else {
+                        setDevice(deviceType.PC)
+                      }
+                    }}
+                  >
+                    {
+                      device === deviceType.PC ? (
+                        <FaLaptopCode className="w-[20px]"/>
+                      ) : (
+                        <FaMobileAlt className="h-[20px]"/>
+                      )
+                    }
+                    
+                  </span>
                   <span
                     className={classNames(
                       "hover:bg-slate-200 rounded-full border-black border-2 w-[36px] h-[36px] flex items-center justify-center",
@@ -583,11 +604,19 @@ ${error.stack}
 
                <div
                 className={
-                  classNames('h-full', {
+                  classNames('h-full flex justify-center', {
                     'hidden': tabValue !== 'desktop'
                   })
                 }
-               >
+               >      
+                  <div
+                      className={
+                        classNames("h-full", {
+                          "w-full": device === deviceType.PC,
+                          "w-[375px]": device === deviceType.MOBILE
+                        }
+                      )}
+                  >
                       <PreviewBox  
                         code={generatedCode}
                         appState={appState}
@@ -598,6 +627,8 @@ ${error.stack}
                         history={history}
                         fixBug={fixBug}
                       />
+                  </div>
+                   
                       {/* <Preview code={generatedCode} device="desktop" appState={appState} fixBug={fixBug}/> */}
                 </div>
               <div 

components/contexts/EditorContext.tsx

@@ -1,25 +1,37 @@
 import { createContext, ReactNode, useState, useEffect, useRef, Dispatch, SetStateAction } from 'react';
 
+export enum deviceType {
+  'PC' = 'pc',
+  'MOBILE' = 'mobile',
+}
+
 interface editorContextType {
     enableEdit: boolean;
-    setEnableEdit: Dispatch<SetStateAction<boolean>>
+    setEnableEdit: Dispatch<SetStateAction<boolean>>;
+    device: deviceType;
+    setDevice: Dispatch<SetStateAction<deviceType>>;
 }
 
 const initialValue = {
     enableEdit: true,
     setEnableEdit: (value: SetStateAction<boolean>) => {},
+    device: deviceType.PC,
+    setDevice: (value: SetStateAction<deviceType>) => {},
+    
 }
 
 export const EditorContext = createContext<editorContextType>(initialValue);
 
 export default function EditorProvider({ children }: { children: ReactNode }) {
    const [enableEdit, setEnableEdit] = useState<boolean>(true);
-
+   const [device, setDevice] = useState<deviceType>(deviceType.PC);
     return (
         <EditorContext.Provider
           value={{
             enableEdit,
-            setEnableEdit
+            setEnableEdit,
+            device,
+            setDevice
           }}
         >
           {children}

engine/index.tsx

@@ -6,13 +6,15 @@ import useThrottle from "../components/hooks/useThrottle";
 import {setHtmlCodeUid} from '../components/compiler';
 import html2canvas from "html2canvas";
 import {HistoryContext} from '../components/contexts/HistoryContext';
-import {EditorContext} from '../components/contexts/EditorContext';
+import {EditorContext, deviceType} from '../components/contexts/EditorContext';
 import { cloneDeep } from 'lodash';
 import {
     FaBug
 } from "react-icons/fa";
 import filesTemplate from './apps/react-shadcnui/files-template';
 import { useSandpack, SandpackProvider } from "@codesandbox/sandpack-react";
+import { cn } from "../components/lib/utils"
+import classNames from "classnames";
 
 // filesTemplate['/src/Preview.jsx'] = `
 // import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "components/ui/card";
@@ -109,7 +111,7 @@ export default function PreviewBox({ code, appState, sendMessageChange, history,
     // const { dispatch, listen } = useSandpack();
 
 
-    const { enableEdit, setEnableEdit } = useContext(EditorContext);
+    const { enableEdit, setEnableEdit, device } = useContext(EditorContext);
     const [filesObj, setFilesObj]= useState<any>(filesTemplate);
 
 
@@ -231,7 +233,9 @@ export default function PreviewBox({ code, appState, sendMessageChange, history,
     };
 
     return (
-        <div className="border-[4px] border-black rounded-[10px] shadow-lg w-full h-full">
+        <div 
+          className="border-[4px] border-black rounded-[10px] shadow-lg h-full w-full"
+        >
             {
                 showDebug && (
                 <span