Stubbing preview toggle buttons

packages/editor-sample/src/App/TemplatePanel/index.tsx

@@ -1,10 +1,22 @@
 import React from 'react';
 
-import { CodeOutlined, DataObjectOutlined, EditOutlined, PreviewOutlined } from '@mui/icons-material';
-import { Box, Stack, Tab, Tabs, Tooltip } from '@mui/material';
+import {
+  CodeOutlined,
+  DataObjectOutlined,
+  EditOutlined,
+  MonitorOutlined,
+  PhoneIphoneOutlined,
+  PreviewOutlined,
+} from '@mui/icons-material';
+import { Box, Stack, SxProps, Tab, Tabs, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
 
 import EditorBlock from '../../documents/editor/EditorBlock';
-import { setEditorState, useDocument, useSelectedMainTab } from '../../documents/editor/EditorContext';
+import {
+  setEditorState,
+  useDocument,
+  useSelectedMainTab,
+  useSelectedScreenSize,
+} from '../../documents/editor/EditorContext';
 import ReaderBlock from '../../documents/reader/ReaderBlock';
 import { ReaderProvider } from '../../documents/reader/ReaderContext';
 import ToggleInspectorPanelButton from '../InspectorDrawer/ToggleInspectorPanelButton';
@@ -17,6 +29,33 @@ import ShareButton from './ShareButton';
 export default function TemplatePanel() {
   const document = useDocument();
   const selectedMainTab = useSelectedMainTab();
+  const selectedScreenSize = useSelectedScreenSize();
+
+  let mainBoxSx: SxProps = {
+    height: '100%',
+  };
+  if (selectedScreenSize === 'mobile') {
+    mainBoxSx = {
+      ...mainBoxSx,
+      margin: '32px auto',
+      width: 370,
+      height: 800,
+      boxShadow:
+        'rgba(33, 36, 67, 0.04) 0px 10px 20px, rgba(33, 36, 67, 0.04) 0px 2px 6px, rgba(33, 36, 67, 0.04) 0px 0px 1px',
+    };
+  }
+
+  const handleScreenSizeChange = (_: unknown, value: unknown) => {
+    console.log(value);
+    switch (value) {
+      case 'mobile':
+        setEditorState({ selectedScreenSize: 'mobile' });
+        return;
+      case 'desktop':
+      default:
+        setEditorState({ selectedScreenSize: 'desktop' });
+    }
+  };
 
   const renderMainPanel = () => {
     switch (selectedMainTab) {
@@ -88,13 +127,28 @@ export default function TemplatePanel() {
               }
             />
           </Tabs>
-
-          <ShareButton />
+          <Stack direction="row" spacing={2}>
+            <ToggleButtonGroup value={selectedScreenSize} exclusive size="small" onChange={handleScreenSizeChange}>
+              <ToggleButton value="desktop">
+                <Tooltip title="Desktop view">
+                  <MonitorOutlined fontSize="small" />
+                </Tooltip>
+              </ToggleButton>
+              <ToggleButton value="mobile">
+                <Tooltip title="Mobile view">
+                  <PhoneIphoneOutlined fontSize="small" />
+                </Tooltip>
+              </ToggleButton>
+            </ToggleButtonGroup>
+            <ShareButton />
+          </Stack>
         </Stack>
 
         <ToggleInspectorPanelButton />
       </Stack>
-      <Box sx={{ height: 'calc(100vh - 49px)', overflow: 'auto', minWidth: 370 }}>{renderMainPanel()}</Box>
+      <Box sx={{ height: 'calc(100vh - 49px)', overflow: 'auto', minWidth: 370 }}>
+        <Box sx={mainBoxSx}>{renderMainPanel()}</Box>
+      </Box>
     </>
   );
 }

packages/editor-sample/src/documents/editor/EditorContext.tsx

@@ -10,6 +10,7 @@ type TValue = {
   selectedBlockId: string | null;
   selectedSidebarTab: 'block-configuration' | 'styles';
   selectedMainTab: 'editor' | 'preview' | 'data' | 'html';
+  selectedScreenSize: 'desktop' | 'mobile';
 
   inspectorDrawerOpen: boolean;
   samplesDrawerOpen: boolean;
@@ -20,6 +21,7 @@ const useEditorState = create<TValue>(() => ({
   selectedBlockId: null,
   selectedSidebarTab: 'styles',
   selectedMainTab: 'editor',
+  selectedScreenSize: 'desktop',
 
   inspectorDrawerOpen: true,
   samplesDrawerOpen: true,
@@ -33,6 +35,10 @@ export function useSelectedBlockId() {
   return useEditorState((s) => s.selectedBlockId);
 }
 
+export function useSelectedScreenSize() {
+  return useEditorState((s) => s.selectedScreenSize);
+}
+
 export function useSelectedMainTab() {
   return useEditorState((s) => s.selectedMainTab);
 }