Add debug panel to preview

aehrc · May 20, 2024 · 50b93ba · 50b93ba
1 parent 9cfd492
commit 50b93ba
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/apps/smart-forms-app/src/features/viewer/ViewerLayout.tsx b/apps/smart-forms-app/src/features/viewer/ViewerLayout.tsx
@@ -26,6 +26,8 @@ import ViewerNav from './ViewerNav/ViewerNav.tsx';
 
 import type { PrintComponentRefContextType } from '../../types/printComponentRefContext.type.ts';
 import GenericHeader from '../../components/Header/GenericHeader.tsx';
+import RendererDebugFooter from '../renderer/components/RendererDebugFooter/RendererDebugFooter.tsx';
+import useDebugMode from '../../hooks/useDebugMode.ts';
 
 export const PrintComponentRefContext = createContext<PrintComponentRefContextType>({
   componentRef: null,
@@ -37,6 +39,8 @@ function ViewerLayout() {
 
   const [componentRef, setComponentRef] = useState<MutableRefObject<null> | null>(null);
 
+  const { debugModeEnabled } = useDebugMode();
+
   return (
     <PrintComponentRefContext.Provider value={{ componentRef, setComponentRef }}>
       <StyledRoot>
@@ -45,6 +49,9 @@ function ViewerLayout() {
 
         <Main>
           <Outlet />
+
+          {/* Debug footer */}
+          {debugModeEnabled ? <RendererDebugFooter /> : null}
         </Main>
         <BackToTopButton>
           <Fab size="medium" sx={{ backgroundColor: 'pale.primary' }}>