#96 adding footer with functional zoom

src/pods/footer/components/index.ts

@@ -0,0 +1,2 @@
+export * from './zoom-in-button';
+export * from './zoom-out-button';

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>
+  );
+};

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>
+  );
+};

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;
+}

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>
+  );
+};