From 40ceb2e08b1cd4e3c35506f808f109ae094a2f91 Mon Sep 17 00:00:00 2001
From: Tanish Manku <tanish2k09.dev@gmail.com>
Date: Fri, 21 Feb 2025 15:49:03 -0800
Subject: [PATCH] Add an Eraser button to Toolbar

---
 .../features/ToolbarMain/ToolbarMain.tsx      | 22 ++++++++++++-------
 .../components/features/ToolbarMain/enum.ts   |  1 +
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx b/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx
index 9f5a041d54..2626ea0ed2 100644
--- a/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx
+++ b/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx
@@ -1,29 +1,27 @@
-import { Fragment, MouseEventHandler } from "react";
-import { twMerge } from "tailwind-merge";
-import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faArrowRotateLeft,
   faArrowRotateRight,
   faCircle,
+  faEraser,
   faFilePlus,
-  faFilm,
   faFloppyDisk,
   faImage,
   faLocationArrow,
-  faMagicWandSparkles,
   faShapes,
   faSquare,
   faText,
-  faTriangle,
+  faTriangle
 } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import { Fragment, MouseEventHandler } from "react";
+import { twMerge } from "tailwind-merge";
 
 import { ToolbarButton } from "../ToolbarButton";
 
 // style and constants
 import { paperWrapperStyles, toolTipStyles } from "~/components/styles";
 import { ToolbarMainButtonNames } from "./enum";
-import { ButtonPreviewAndRender } from "./ButtonPreviewAndRender";
 
 export const ToolbarMain = ({
   disabled = false,
@@ -118,6 +116,14 @@ export const ToolbarMain = ({
           </Popover>
 
         </div>
+        <div className="flex flex-col items-center gap-2">
+          <ToolbarButton
+            icon={faEraser}
+            buttonProps={buttonProps.ERASER}
+            tooltip="Eraser"
+          />
+        </div>
+
         <div className="flex flex-col items-center gap-2">
           <ToolbarButton
             icon={faArrowRotateLeft}
diff --git a/frontend/realtime/src/components/features/ToolbarMain/enum.ts b/frontend/realtime/src/components/features/ToolbarMain/enum.ts
index 670316d852..2ad6930907 100644
--- a/frontend/realtime/src/components/features/ToolbarMain/enum.ts
+++ b/frontend/realtime/src/components/features/ToolbarMain/enum.ts
@@ -7,6 +7,7 @@ export enum ToolbarMainButtonNames {
   ADD_CIRCLE = "ADD_CIRCLE",
   ADD_TRIANGLE = "ADD_TRIANGLE",
   ADD_SQUARE = "ADD_SQUARE",
+  ERASER = "ERASER",
   AI_STYLIZE = "AI_STYLIZE",
   UNDO = "UNDO",
   REDO = "REDO",