refactor: Remove unused code and lint fix

Author: Yash

src/app/page.tsx

@@ -1,5 +1,5 @@
 import Editor from "@/components/editor/Editor";
-import { SnapcutEditor } from "@/components/snapcut-editor";
+// import { SnapcutEditor } from "@/components/snapcut-editor";
 
 export default function Home() {
   return (

src/components/editor/Editor.tsx

@@ -4,9 +4,7 @@ import Viewer from './Viewer';
 import Toolbar from './Toolbar';
 import EditorHeader from './EditorHeader';
 
-type Props = {}
-
-const Editor = (props: Props) => {
+const Editor = () => {
   const [img, setImg] = useState<string | null>(null);
 
   const onImageChange = (e) => {
@@ -17,9 +15,11 @@ const Editor = (props: Props) => {
   };
 
   return (
-    <main className="min-h-full flex flex-col flex-1 bg-gradient-to-tr from-[#004d7a]/10 to-[#00bf72]/10 " style={{
-      // backgroundImage: "linear-gradient(to right top, #051937, #004d7a, #008793 , #00bf72, #a8eb12)"
-    }}>
+    <main className="min-h-full flex flex-col flex-1 bg-gradient-to-tr from-[#004d7a]/10 to-[#00bf72]/10 "
+    // style={{
+    // backgroundImage: "linear-gradient(to right top, #051937, #004d7a, #008793 , #00bf72, #a8eb12)"
+    // }}
+    >
       <EditorHeader />
       <Viewer img={img} />
       <Toolbar onImageChange={onImageChange} img={img} />

src/components/editor/EditorHeader.tsx

@@ -1,32 +1,10 @@
 "use client"
-import { useState, useEffect, useCallback } from 'react'
 import {
-  Moon,
-  Sun,
   Github,
-  Upload,
-  Wand2,
-  Layers,
-  Paintbrush,
-  Maximize2,
-  CornerUpLeft,
-  Square,
-  Cloud,
-  Share2,
-  Download
 } from 'lucide-react'
-import Image from 'next/image'
-import { toast } from 'sonner'
-type Props = {}
 
-const EditorHeader = (props: Props) => {
-  const [darkMode, setDarkMode] = useState(false)
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  const toggleDarkMode = () => setDarkMode(!darkMode)
+const EditorHeader = () => {
+  // const toggleDarkMode = () => setDarkMode(!darkMode)
 
   return (
     <header className="flex justify-between items-center p-6 transition-colors duration-300">
@@ -49,7 +27,7 @@ const EditorHeader = (props: Props) => {
           href="https://github.com/YashM20/snapcut"
           target="_blank"
           rel="noopener noreferrer"
-          className="px-4 py-2 bg-gradient-to-r  from-emerald-800/80 to-emerald-700 text-white rounded-full flex items-center gap-2 hover:from-purple-700 hover:to-pink-700 transition-all duration-300 shadow-lg"
+          className="px-4 py-2 bg-gradient-to-r  hover:from-emerald-800/80 hover:to-emerald-700 text-white rounded-full flex items-center gap-2 from-emerald-950 to-emerald-900 transition-all duration-300 shadow-lg"
         >
           <Github className="w-5 h-5" />
           GitHub

src/components/editor/Toolbar.tsx

@@ -1,6 +1,5 @@
 "use client"
-import React, { useEffect } from "react";
-import Background from "./tools/background/Background";
+import React from "react";
 import Corners from "./tools/corners/Corners";
 import Padding from "./tools/padding/Padding";
 import Shadow from "./tools/shadow/Shadow";
@@ -9,6 +8,7 @@ import Resize from "./tools/resize/Resize";
 import useClipboardImage from "./tools/clipboard/Clipboard";
 import CopyClipboard from "./tools/clipboard/CopyClipboard";
 import { UploadIcon } from "@radix-ui/react-icons";
+import { Upload } from "lucide-react";
 
 
 export default function Toolbar({ onImageChange, img }) {
@@ -23,7 +23,7 @@ export default function Toolbar({ onImageChange, img }) {
               className="transform p-4 flex font-semibold text-lg justify-center items-center px-8 rounded-full bg-gradient-to-r from-emerald-800/80 to-emerald-700 text-white/80 ease-in-out  group outline-none ring  dark:ring-0 ring-emerald-100/50 hover:from-emerald-950 hover:to-emerald-900 transition-all duration-300 shadow-lg"
               onClick={() => document.getElementById("file_select").click()}
             >
-              <UploadIcon className="w-6 mr-2 stroke-[2] group-hover:-rotate-3 group-active:rotate-3" />
+              <Upload className="w-5 mr-4 mb-1 stroke-[2] group-hover:-rotate-3 group-active:rotate-3" />
               Upload Screenshot
             </button>
           )}

src/components/editor/Viewer.tsx

@@ -17,12 +17,12 @@ const Viewer = ({ img }: Props) => {
     setImgH(document?.getElementById("parent-img")?.offsetHeight || 0);
     setImgW(document?.getElementById("parent-img")?.offsetWidth || 0);
     // }
-  });
+  }, [img]);
 
   return (
     <div className="h-[80vh] min-w-full w-full flex justify-center items-center overflow-auto ">
-      <div className="rounded-md overflow-hidden">
-        <div id="my-node" className="relative max-w-[80vw] sm:h-96 p-6 flex justify-center items-center bg-slate-300/10 ">
+      <div className="rounded-md overflow-hidden bg-transparent/15">
+        <div id="my-node" className="relative max-w-[80vw] sm:h-96 p-6 flex  justify-center items-center bg-transparent ">
           <Draggable>
             <Image
               height={200}

src/components/editor/tools/background/Background.js

@@ -3,8 +3,10 @@ import { PaintBrushIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import ClickAwayListener from "react-click-away-listener";
 import Color from "./Color";
-const getColors = require("get-image-colors");
-var rgb2hex = require("rgb2hex");
+// const getColors = require("get-image-colors");
+// var rgb2hex = require("rgb2hex");
+import getColors from "get-image-colors";
+import rgb2hex from "rgb2hex";
 
 export default function Background({ img }) {
   const [isVisible, setIsVisible] = useState(false);

src/components/editor/tools/clipboard/Clipboard.js

@@ -8,7 +8,7 @@ export default function useClipboardImage(onImageChange) {
       if (clipboardItems.items[i].type.indexOf("image") === 0) {
         let blob = clipboardItems.items[i].getAsFile();
         let reader = new FileReader();
-        reader.onload = function (evt) {
+        reader.onload = function () {
           onImageChange({ target: { files: [new File([blob], "pasted-image.png")] } });
         };
         reader.readAsArrayBuffer(blob);
@@ -21,5 +21,5 @@ export default function useClipboardImage(onImageChange) {
     return () => {
       window.removeEventListener('paste', handlePaste);
     };
-  }, [onImageChange]);
+  }, [onImageChange, handlePaste]);
 }

src/components/editor/tools/clipboard/CopyClipboard.js

@@ -1,6 +1,6 @@
 "use client"
-import { ArrowDownTrayIcon, ClipboardIcon } from "@heroicons/react/24/outline";
-import React, { useEffect } from "react";
+import { ClipboardIcon } from "@heroicons/react/24/outline";
+import React from "react";
 import * as htmlToImage from "html-to-image";
 import { useState } from "react";
 import ClickAwayListener from "react-click-away-listener";
@@ -14,7 +14,8 @@ export default function CopyClipboard() {
   const [isVisible, setIsVisible] = useState(false);
   const [isCopyButtonDisabled, setIsCopyButtonDisabled] =
     useState(false);
-  const [copyFormat, setCopyFormat] = useState("png");    // png by default
+  // const [copyFormat, setCopyFormat] = useState("png");    // png by default
+  const copyFormat = "png"    // png by default
   // Click away handle
   const handleClickAway = () => {
     setIsVisible(false);
@@ -53,7 +54,7 @@ export default function CopyClipboard() {
                 toast.dismiss("start");
                 toast.success("Copied to Clipboard Successfully!");
                 setIsCopyButtonDisabled(false);
-              }).catch((error) => {
+              }).catch(() => {
                 toast.dismiss("start");
                 toast.error("Failed to Copy to Clipboard!");
                 setIsCopyButtonDisabled(false);

src/components/editor/tools/download/Download.js

@@ -49,11 +49,13 @@ export default function Download() {
         });
       });
   }
+
   useEffect(() => {
     if (isVisible) {
       document.getElementById(downloadFormat).checked = true;
     }
-  }, [isVisible]);
+  }, [isVisible, downloadFormat]);
+
   return (
     <>
       <div className="flex flex-col justify-center items-center rounded-xl cursor-pointer active:scale-95 transform transition-all ease-in-out duration-200">