AI magic button

src/components/features/ToolbarImage/data.ts

@@ -4,10 +4,8 @@ import {
   faArrowsRotate,
   faArrowsUpDownLeftRight,
   faArrowDownFromLine,
-  // faEraser,
-  // faPaintbrush,
+  faHatWitch,
   faTrashCan,
-  // faWandMagicSparkles,
 } from "@fortawesome/pro-thin-svg-icons";
 
 export const ToolbarImageButtonData = [
@@ -19,6 +17,10 @@ export const ToolbarImageButtonData = [
     name: ToolbarImageButtonNames.ROTATE,
     icon: faArrowsRotate,
   },
+  {
+    name: ToolbarImageButtonNames.AI_STYLIZE,
+    icon: faHatWitch,
+  },
   {
     name: ToolbarImageButtonNames.MOVE_LAYER_UP,
     icon: faArrowUpFromLine,
@@ -27,18 +29,6 @@ export const ToolbarImageButtonData = [
     name: ToolbarImageButtonNames.MOVE_LAYER_DOWN,
     icon: faArrowDownFromLine,
   },
-  // {
-  //   name: ToolbarImageButtonNames.ERASE,
-  //   icon: faEraser,
-  // },
-  // {
-  //   name: ToolbarImageButtonNames.PAINT,
-  //   icon: faPaintbrush,
-  // },
-  // {
-  //   name: ToolbarImageButtonNames.MAGIC,
-  //   icon: faWandMagicSparkles,
-  // },
   {
     name: ToolbarImageButtonNames.DELETE,
     icon: faTrashCan,

src/components/features/ToolbarImage/enums.ts

@@ -1,9 +1,7 @@
 export enum ToolbarImageButtonNames {
   MOVE = "MOVE",
   ROTATE = "ROTATE",
-  ERASE = "ERASE",
-  PAINT = "PAINT",
-  MAGIC = "MAGIC",
+  AI_STYLIZE = "AI_STYLIZE",
   DELETE = "DELETE",
   MOVE_LAYER_UP = "MOVE_LAYER_UP",
   MOVE_LAYER_DOWN = "MOVE_LAYER_DOWN",

src/components/features/ToolbarMain/index.tsx

@@ -10,10 +10,10 @@ import {
   faFilm,
   faFloppyDisk,
   // faHand,
+  faHatWizard,
   faImage,
   faLocationArrow,
-  faArrowTurnLeft,
-  faArrowTurnRight,
+
   // faPlus,
   // faMinus,
   faSquareDashed,
@@ -120,13 +120,8 @@ export const ToolbarMain = () => {
             )}
           </div>
           <ToolbarButtons icon={faCameraRotate} />
+          <ToolbarButtons icon={faHatWizard} />
         </div>
-        {/* <div className="flex items-center gap-2 px-2">
-          <ToolbarButtons icon={faMinus} />
-          <span>100%</span>
-          <ToolbarButtons icon={faPlus} />
-          <ToolbarButtons icon={faHand} />
-        </div> */}
         <div className="flex items-center gap-2 px-2">
           <ToolbarButtons icon={faArrowRotateLeft} />
           <ToolbarButtons icon={faArrowRotateRight} />