feat: ✨ Add funcionality to editor bottom bar controls

yossTheDev · Nov 16, 2024 · 1b5a2ad · 1b5a2ad
1 parent ba8ea63
commit 1b5a2ad
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git a/components/editor.tsx b/components/editor.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 "use client"
 
-import { FormEvent, useEffect, useState } from "react"
+import { FormEvent, useEffect, useRef, useState } from "react"
 import Image from "next/image"
 import { Config, removeBackground } from "@imgly/background-removal"
 import { sendGAEvent } from "@next/third-parties/google"
@@ -42,6 +42,7 @@ import ImageSettings from "./settings/ImageSettings"
 import { ThemeToggle } from "./theme-toggle"
 
 export const Editor = () => {
+  const editor = useRef<InfiniteViewer>(null)
   const [show, setShow] = useState(false)
 
   const [files, setFiles] = useState<File[] | null>([])
@@ -177,6 +178,7 @@ export const Editor = () => {
   return (
     <>
       <InfiniteViewer
+        ref={editor}
         className="viewer my-2 h-screen w-screen"
         margin={0}
         threshold={0}
@@ -288,19 +290,34 @@ export const Editor = () => {
               <Download></Download>
             </Button>
 
-            <Button size={"icon"} variant={"ghost"}>
-              <Settings></Settings>
-            </Button>
-
-            <Button size={"icon"} variant={"ghost"}>
+            <Button
+              onClick={() =>
+                editor.current?.setZoom(editor.current.getZoom() + 0.2)
+              }
+              size={"icon"}
+              variant={"ghost"}
+            >
               <ZoomIn></ZoomIn>
             </Button>
 
-            <Button size={"icon"} variant={"ghost"}>
+            <Button
+              onClick={() =>
+                editor.current?.setZoom(editor.current.getZoom() - 0.2)
+              }
+              size={"icon"}
+              variant={"ghost"}
+            >
               <ZoomOut></ZoomOut>
             </Button>
 
-            <Button size={"icon"} variant={"ghost"}>
+            <Button
+              onClick={() => {
+                editor.current?.setZoom(1)
+                editor.current?.scrollCenter()
+              }}
+              size={"icon"}
+              variant={"ghost"}
+            >
               <ScanEye></ScanEye>
             </Button>
 

diff --git a/components/settings/ImageSettings.tsx b/components/settings/ImageSettings.tsx
@@ -29,7 +29,7 @@ export default function ImageSettings({
   return (
     <div className="flex flex-col gap-4">
       {/* Name */}
-      <div>
+      <div className="flex flex-col gap-2">
         <label className="text-sm font-medium">Image Name</label>
         <Input
           disabled
@@ -40,7 +40,7 @@ export default function ImageSettings({
       </div>
 
       {/* Remove */}
-      <div>
+      <div className="flex flex-col gap-2">
         <label className="flex items-center text-sm font-medium">
           Remove
           <Tooltip>
@@ -71,7 +71,7 @@ export default function ImageSettings({
       </div>
 
       {/* Model */}
-      <div>
+      <div className="flex flex-col gap-2">
         <label className="flex items-center text-sm font-medium">
           Model
           <Tooltip>
@@ -114,7 +114,7 @@ export default function ImageSettings({
       </div>
 
       {/* Quality */}
-      <div>
+      <div className="flex flex-col gap-2">
         <label className="flex items-center text-sm font-medium">
           Quality
           <Tooltip>
@@ -138,7 +138,7 @@ export default function ImageSettings({
       </div>
 
       {/* Format */}
-      <div>
+      <div className="flex flex-col gap-2">
         <label className="flex items-center text-sm font-medium">
           Format
           <Tooltip>
@@ -164,8 +164,6 @@ export default function ImageSettings({
           </SelectContent>
         </Select>
       </div>
-
-      <Button onClick={() => console.log(settings)}>Save Settings</Button>
     </div>
   )
 }