introduce print dialog to add more options in exporting resume

src/components/App/App.js

@@ -10,6 +10,7 @@ import RightSidebar from '../RightSidebar/RightSidebar';
 
 import templates from '../../templates';
 import PageController from '../../shared/PageController';
+import PrintDialog from '../../shared/PrintDialog';
 
 const App = () => {
   const pageRef = useRef(null);
@@ -36,7 +37,7 @@ const App = () => {
       <div className="h-screen grid grid-cols-5 items-center">
         <LeftSidebar />
 
-        <div className="relative z-0 h-screen overflow-hidden col-span-3 flex justify-center items-center">
+        <div className="relative z-10 h-screen overflow-hidden col-span-3 flex justify-center items-center">
           <PanZoom
             ref={panZoomRef}
             minZoom="0.4"
@@ -48,7 +49,7 @@ const App = () => {
             style={{ outline: 'none' }}
           >
             <div id="page" ref={pageRef} className="shadow-2xl break-words">
-              {templates.find(x => theme.layout.toLowerCase() === x.key).component()}
+              {templates.find((x) => theme.layout.toLowerCase() === x.key).component()}
             </div>
           </PanZoom>
 
@@ -56,6 +57,8 @@ const App = () => {
         </div>
 
         <RightSidebar />
+
+        <PrintDialog />
       </div>
     </Suspense>
   );

src/components/RightSidebar/tabs/Actions.js

@@ -1,15 +1,16 @@
 /* eslint-disable new-cap */
 /* eslint-disable jsx-a11y/anchor-has-content */
 /* eslint-disable jsx-a11y/anchor-is-valid */
+
 import React, { useRef, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PageContext from '../../../context/PageContext';
-import { importJson, saveAsPdf } from '../../../utils';
+import { importJson } from '../../../utils';
 
 const ActionsTab = ({ data, theme, dispatch }) => {
   const pageContext = useContext(PageContext);
-  const { pageRef, panZoomRef } = pageContext;
+  const { setPrintDialogOpen } = pageContext;
   const { t } = useTranslation('rightSidebar');
   const fileInputRef = useRef(null);
 
@@ -47,7 +48,7 @@ const ActionsTab = ({ data, theme, dispatch }) => {
           ref={fileInputRef}
           type="file"
           className="hidden"
-          onChange={e => importJson(e, dispatch)}
+          onChange={(e) => importJson(e, dispatch)}
         />
         <a id="downloadAnchor" className="hidden" />
 
@@ -84,7 +85,7 @@ const ActionsTab = ({ data, theme, dispatch }) => {
 
         <button
           type="button"
-          onClick={() => saveAsPdf(pageRef, panZoomRef)}
+          onClick={() => setPrintDialogOpen(true)}
           className="mt-4 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium py-2 px-5 rounded"
         >
           <div className="flex justify-center items-center">