Reupload button to save mere seconds when using square tool

src/app/(tools)/square-image/square-tool.tsx

@@ -10,6 +10,7 @@ import {
   useFileUploader,
 } from "@/hooks/use-file-uploader";
 import { useEffect, useState } from "react";
+import ReuploadBox from "@/components/shared/reupload-box";
 
 function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
   const { imageContent, imageMetadata, handleFileUploadEvent, cancel } =
@@ -132,6 +133,7 @@ function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
         >
           Save Image
         </button>
+        <ReuploadBox accept="image/*" onChange={handleFileUploadEvent} />
       </div>
     </div>
   );

src/components/shared/reupload-box.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+interface ReuploadBoxProps {
+  accept: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function ReuploadBox({ accept, onChange }: ReuploadBoxProps) {
+  return (
+    <label className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-3 py-2 text-white shadow-sm transition-colors focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-blue-700">
+      <span className="text-sm font-medium">Reupload</span>
+      <input
+        type="file"
+        onChange={onChange}
+        accept={accept}
+        className="hidden"
+      />
+    </label>
+  );
+}