🚀 release v3.0.0

client/components/build/Center/Center.tsx

@@ -0,0 +1,57 @@
+import clsx from 'clsx';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+
+import { useAppSelector } from '@/store/hooks';
+
+import ArtboardController from './ArtboardController';
+import styles from './Center.module.scss';
+import Header from './Header';
+import Page from './Page';
+
+const Center = () => {
+  const orientation = useAppSelector((state) => state.build.page.orientation);
+
+  const resume = useAppSelector((state) => state.resume);
+  const layout: string[][][] = get(resume, 'metadata.layout');
+
+  if (isEmpty(resume)) return null;
+
+  return (
+    <div className={clsx(styles.center)}>
+      <Header />
+
+      <TransformWrapper
+        centerOnInit
+        minScale={0.25}
+        initialScale={0.95}
+        limitToBounds={false}
+        centerZoomedOut={false}
+        pinch={{ step: 1 }}
+        wheel={{ step: 0.1 }}
+      >
+        {(controllerProps) => (
+          <>
+            <TransformComponent wrapperClass={styles.wrapper}>
+              <div
+                className={clsx({
+                  [styles.artboard]: true,
+                  'flex-col': orientation === 'vertical',
+                })}
+              >
+                {layout.map((_, pageIndex) => (
+                  <Page key={pageIndex} page={pageIndex} showPageNumbers />
+                ))}
+              </div>
+            </TransformComponent>
+
+            <ArtboardController {...controllerProps} />
+          </>
+        )}
+      </TransformWrapper>
+    </div>
+  );
+};
+
+export default Center;