introduce print dialog to add more options in exporting resume

src/shared/PageController.js

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
+
 import PageContext from '../context/PageContext';
-import { saveAsPdf } from '../utils';
 
 const PageController = () => {
   const pageContext = useContext(PageContext);
-  const { pageRef, panZoomRef } = pageContext;
+  const { panZoomRef, setPrintDialogOpen } = pageContext;
 
   const zoomIn = () => panZoomRef.current.zoomIn(2);
   const zoomOut = () => panZoomRef.current.zoomOut(2);
@@ -35,7 +35,7 @@ const PageController = () => {
 
         <div
           className="p-3 hover:bg-gray-200 cursor-pointer flex"
-          onClick={() => saveAsPdf(pageRef, panZoomRef)}
+          onClick={() => setPrintDialogOpen(true)}
         >
           <i className="material-icons">save</i>
         </div>

src/shared/PrintDialog.js

@@ -0,0 +1,103 @@
+import React, { useState, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageContext from '../context/PageContext';
+import Dropdown from './Dropdown';
+import { saveAsPdf, saveAsMultiPagePdf } from '../utils';
+
+const PrintDialog = () => {
+  const { t } = useTranslation();
+  const pageContext = useContext(PageContext);
+  const { pageRef, panZoomRef, isPrintDialogOpen, setPrintDialogOpen } = pageContext;
+
+  const printTypes = [
+    { key: 'unconstrained', value: `${t('printDialog.printType.types.unconstrained')}` },
+    { key: 'fitInA4', value: `${t('printDialog.printType.types.fitInA4')}` },
+    { key: 'multiPageA4', value: `${t('printDialog.printType.types.multiPageA4')}` },
+  ];
+
+  const [quality, setQuality] = useState(80);
+  const [type, setType] = useState(printTypes[0].key);
+
+  return (
+    <div
+      className={`absolute inset-0 transition-all duration-200 ease-in-out ${
+        isPrintDialogOpen ? 'opacity-100 z-20' : 'opacity-0 z-0'
+      }`}
+      style={{ backgroundColor: 'rgba(0, 0, 0, 0.25)' }}
+      onClick={() => {
+        setPrintDialogOpen(false);
+      }}
+    >
+      <div
+        className="centered py-8 px-12 bg-white shadow-xl rounded w-full md:w-1/3"
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+      >
+        <h5 className="mb-6 text-lg font-bold">{t('printDialog.heading')}</h5>
+
+        <h6 className="mb-1 text-sm font-medium">{t('printDialog.quality.label')}</h6>
+        <div className="flex items-center">
+          <input
+            type="range"
+            className="w-full h-4 my-2 rounded-full overflow-hidden appearance-none focus:outline-none bg-gray-400"
+            value={quality}
+            onChange={(e) => setQuality(e.target.value)}
+            min="40"
+            max="100"
+            step="5"
+          />
+
+          <h6 className="font-medium pl-5">{quality}%</h6>
+        </div>
+
+        <h6 className="mt-4 mb-2 text-sm font-medium">{t('printDialog.printType.label')}</h6>
+        <Dropdown
+          value={type}
+          options={printTypes}
+          onChange={setType}
+          optionItem={(x) => (
+            <option key={x.key} value={x.key}>
+              {x.value}
+            </option>
+          )}
+        />
+
+        <div className="flex justify-between">
+          <button
+            type="button"
+            onClick={() => {
+              setPrintDialogOpen(false);
+            }}
+            className="mt-6 border border-red-600 text-red-600 hover:bg-red-600 hover:text-white text-sm font-medium py-2 px-5 rounded"
+          >
+            <div className="flex justify-center items-center">
+              <i className="material-icons mr-2 font-bold text-base">close</i>
+              <span className="text-sm">{t('printDialog.buttons.cancel')}</span>
+            </div>
+          </button>
+
+          <button
+            type="button"
+            onClick={async () => {
+              await (type === 'multiPageA4'
+                ? saveAsMultiPagePdf(pageRef, panZoomRef, quality)
+                : saveAsPdf(pageRef, panZoomRef, quality, type));
+              setPrintDialogOpen(false);
+            }}
+            className="mt-6 border border-gray-700 text-gray-700 hover:bg-gray-700 hover:text-white text-sm font-medium py-2 px-5 rounded"
+          >
+            <div className="flex justify-center items-center">
+              <i className="material-icons mr-2 font-bold text-base">save</i>
+              <span className="text-sm">{t('printDialog.buttons.saveAsPdf')}</span>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PrintDialog;