image context menu

src/components/ContextualToolbars/ContextualImageToolbar.tsx

@@ -0,0 +1,43 @@
+import { twMerge } from "tailwind-merge";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  faArrowsRotate,
+  faArrowsUpDownLeftRight,
+  faEraser,
+  faImage,
+  faPaintbrush,
+  faTrashCan,
+  faWandMagicSparkles,
+} from "@fortawesome/pro-thin-svg-icons";
+import { ToolbarButtons } from "~/components/features/ToolbarButtons";
+import { paperWrapperStyles } from "~/components/styles";
+
+export const ContextualImageToolbar = ({
+  position,
+}: {
+  position: {
+    x: number;
+    y: number;
+  };
+}) => {
+  return (
+    <div
+      className={twMerge(paperWrapperStyles, "fixed flex gap-2")}
+      style={{
+        top: position.y,
+        left: position.x,
+      }}
+    >
+      <div className="flex size-10 items-center justify-center rounded-3xl bg-ui-border p-2">
+        <FontAwesomeIcon icon={faImage} />
+      </div>
+      <ToolbarButtons icon={faArrowsUpDownLeftRight} />
+      <ToolbarButtons icon={faArrowsRotate} />
+      <ToolbarButtons icon={faEraser} />
+      <ToolbarButtons icon={faPaintbrush} />
+      <ToolbarButtons icon={faWandMagicSparkles} />
+      <ToolbarButtons icon={faTrashCan} />
+    </div>
+  );
+};

src/components/ContextualToolbars/index.ts

@@ -0,0 +1 @@
+export * from "./ContextualImageToolbar";

src/components/features/ToolbarMain/index.tsx

@@ -17,7 +17,7 @@ import {
   faSquareDashed,
 } from "@fortawesome/pro-thin-svg-icons";
 
-import { ToolbarButtons } from "./ToolbarButtons";
+import { ToolbarButtons } from "../ToolbarButtons";
 import { twMerge } from "tailwind-merge";
 
 import { UploadImage } from "../UploadImage";
@@ -82,14 +82,14 @@ export const ToolbarMain = () => {
               </div>
             )}
           </div>
+          <ToolbarButtons icon={faCameraRotate} />
         </div>
-        <div className="flex items-center gap-2 px-2">
+        {/* <div className="flex items-center gap-2 px-2">
           <ToolbarButtons icon={faMinus} />
           <span>100%</span>
           <ToolbarButtons icon={faPlus} />
           <ToolbarButtons icon={faHand} />
-          <ToolbarButtons icon={faCameraRotate} />
-        </div>
+        </div> */}
         <div className="flex items-center gap-2 px-2">
           <ToolbarButtons icon={faArrowRotateLeft} />
           <ToolbarButtons icon={faArrowRotateRight} />

src/pages/sandbox.tsx

@@ -1,5 +1,7 @@
 import { LoadingBar, LoadingBarStatus } from "~/components/ui";
 
+import { ContextualImageToolbar } from "~/components/ContextualToolbars";
+
 export const Sandbox = () => {
   return (
     <div>
@@ -18,6 +20,8 @@ export const Sandbox = () => {
         isShowing={true}
         message="Loading..."
       />
+
+      <ContextualImageToolbar position={{ x: 300, y: 600 }} />
     </div>
   );
 };