add delete all btn

src/components/AnnotationControls/AnnotationControls.css

@@ -55,3 +55,7 @@
 .delete-btn {
     background: #ffb38a;
 }
+
+.clean-btn{
+    background: #ff8a8a;
+}

src/components/AnnotationControls/AnnotationControls.js

@@ -1,5 +1,6 @@
 import { Slider } from '@mui/material';
 import { FaStop } from "react-icons/fa";
+import { MdCleaningServices } from "react-icons/md";
 import './AnnotationControls.css';
 
 function AnnotationControls({
@@ -11,7 +12,8 @@ function AnnotationControls({
     onFrameForward,
     onSaveAnnotation,
     onStop,
-    onDelete
+    onDelete,
+    onDeleteAll
 }) {
 
     function formatDuration(value) {
@@ -87,6 +89,13 @@ function AnnotationControls({
                 >
                     🗑️ Delete
                 </button>
+                <button
+                    className='control-btn clean-btn'
+                    onClick={onDeleteAll}
+                    title='DeleteAll'
+                >
+                    <MdCleaningServices /> Delete All
+                </button>
             </div>
         </div>
     );

src/components/AnnotationMain/AnnotationMain.js

@@ -99,6 +99,10 @@ function AnnotationMain() {
         setErrorMessage("");
     };
 
+    const handleDeleteAll = () => {
+        setDetections([]);
+    }
+
     const handleAnnotationClick = (time) => {
         setCurrentTime(time);
         const annotation = annotations[time];
@@ -225,6 +229,7 @@ function AnnotationMain() {
                         onSaveAnnotation={handleAnnotationSave}
                         onStop={handleStop}
                         onDelete={handleDelete}
+                        onDeleteAll={handleDeleteAll}
                     />
                 </div>
             </div>