From 04366277b03f65483e8d0ae2e684dc79da56f6bf Mon Sep 17 00:00:00 2001
From: oleojake <oleojake@gmail.com>
Date: Thu, 1 Aug 2024 15:49:09 +0200
Subject: [PATCH] #96 adding footer with functional zoom

---
 src/pods/footer/components/index.ts           |  2 +
 src/pods/footer/components/zoom-in-button.tsx | 23 ++++++++
 .../footer/components/zoom-out-button.tsx     | 23 ++++++++
 src/pods/footer/footer.pod.module.css         | 53 +++++++++++++++++++
 src/pods/footer/footer.pod.tsx                | 26 +++++++++
 5 files changed, 127 insertions(+)
 create mode 100644 src/pods/footer/components/index.ts
 create mode 100644 src/pods/footer/components/zoom-in-button.tsx
 create mode 100644 src/pods/footer/components/zoom-out-button.tsx
 create mode 100644 src/pods/footer/footer.pod.module.css
 create mode 100644 src/pods/footer/footer.pod.tsx

diff --git a/src/pods/footer/components/index.ts b/src/pods/footer/components/index.ts
new file mode 100644
index 00000000..ccff707c
--- /dev/null
+++ b/src/pods/footer/components/index.ts
@@ -0,0 +1,2 @@
+export * from './zoom-in-button';
+export * from './zoom-out-button';
diff --git a/src/pods/footer/components/zoom-in-button.tsx b/src/pods/footer/components/zoom-in-button.tsx
new file mode 100644
index 00000000..7ef8d1c3
--- /dev/null
+++ b/src/pods/footer/components/zoom-in-button.tsx
@@ -0,0 +1,23 @@
+import { ZoomInIcon } from '@/common/components/icons/zoom-in.component';
+
+interface ZoomInButtonProps {
+  scale: number;
+  setScale: React.Dispatch<React.SetStateAction<number>>;
+  className: string;
+}
+
+export const ZoomInButton: React.FC<ZoomInButtonProps> = props => {
+  const { scale, setScale, className } = props;
+
+  const handleClick = () => {
+    setScale(prevScale => Number(Math.min(1.5, prevScale + 0.1).toFixed(1)));
+  };
+
+  const isDisabled = scale >= 1.5;
+
+  return (
+    <button onClick={handleClick} className={className} disabled={isDisabled}>
+      <ZoomInIcon />
+    </button>
+  );
+};
diff --git a/src/pods/footer/components/zoom-out-button.tsx b/src/pods/footer/components/zoom-out-button.tsx
new file mode 100644
index 00000000..2bcee2a2
--- /dev/null
+++ b/src/pods/footer/components/zoom-out-button.tsx
@@ -0,0 +1,23 @@
+import { ZoomOutIcon } from '@/common/components/icons/zoom-out.component';
+
+interface ZoomOutButtonProps {
+  scale: number;
+  setScale: React.Dispatch<React.SetStateAction<number>>;
+  className: string;
+}
+
+export const ZoomOutButton: React.FC<ZoomOutButtonProps> = props => {
+  const { scale, setScale, className } = props;
+
+  const handleClick = () => {
+    setScale(prevScale => Number(Math.max(0.5, prevScale - 0.1).toFixed(1)));
+  };
+
+  const isDisabled = scale <= 0.5;
+
+  return (
+    <button onClick={handleClick} className={className} disabled={isDisabled}>
+      <ZoomOutIcon />
+    </button>
+  );
+};
diff --git a/src/pods/footer/footer.pod.module.css b/src/pods/footer/footer.pod.module.css
new file mode 100644
index 00000000..2754dafe
--- /dev/null
+++ b/src/pods/footer/footer.pod.module.css
@@ -0,0 +1,53 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--primary-50);
+  border-top: 1px solid var(--primary-100);
+  padding: var(--space-xs) var(--space-md);
+}
+
+.title {
+  flex-grow: 1;
+}
+
+.zoomContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-xs);
+}
+
+.zoomValue {
+  min-width: 50px;
+  text-align: center;
+}
+
+.button {
+  border: none;
+  color: var(--text-color);
+  background-color: inherit;
+  padding: var(--space-s);
+  border-radius: var(--border-radius-m);
+  font-size: var(--fs-xs);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-s);
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: var(--primary-100);
+}
+
+.button:disabled {
+  color: var(--primary-300);
+  cursor: not-allowed;
+}
+
+.button:disabled:hover {
+  background-color: inherit;
+}
diff --git a/src/pods/footer/footer.pod.tsx b/src/pods/footer/footer.pod.tsx
new file mode 100644
index 00000000..124f2921
--- /dev/null
+++ b/src/pods/footer/footer.pod.tsx
@@ -0,0 +1,26 @@
+import { useCanvasContext } from '@/core/providers';
+import classes from './footer.pod.module.css';
+import { ZoomInButton, ZoomOutButton } from './components';
+
+export const FooterPod = () => {
+  const { scale, setScale } = useCanvasContext();
+
+  return (
+    <footer className={classes.container}>
+      <p className={classes.title}>Quickmock - © Lemoncode</p>
+      <div className={classes.zoomContainer}>
+        <ZoomOutButton
+          scale={scale}
+          setScale={setScale}
+          className={classes.button}
+        />
+        <p className={classes.zoomValue}>{(scale * 100).toFixed(0)} %</p>
+        <ZoomInButton
+          scale={scale}
+          setScale={setScale}
+          className={classes.button}
+        />
+      </div>
+    </footer>
+  );
+};