feat(frontend): add delete option for clips

frontend/src/pages/MyClips.tsx

@@ -1,6 +1,6 @@
 import VideoCard from "../components/video/VideoCard";
-import {useEffect, useState} from "react";
-import { getClips } from "../utils/endpoints";
+import { useEffect, useState } from "react";
+import { getClips, deleteClip } from "../utils/endpoints";
 import type { Clip } from "../utils/types";
 
 const MyClips = () => {
@@ -9,10 +9,19 @@ const MyClips = () => {
 
     useEffect(() => {
         getClips()
-            .then((data) => setClips(data))
+            .then(setClips)
             .catch((err) => setError(err));
     }, []);
 
+    const handleDelete = async (id: number) => {
+        try {
+            await deleteClip(id);
+            setClips(prev => prev.filter(c => c.id !== id));
+        } catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to delete clip");
+        }
+    };
+
     return (
         <div className="p-6">
             <h1 className="text-2xl font-semibold text-gray-900 mb-6">My Clips</h1>
@@ -25,6 +34,7 @@ const MyClips = () => {
                         title={clip.title}
                         duration={clip.duration}
                         createdAt={clip.createdAt}
+                        onDelete={() => handleDelete(clip.id)}
                     />
                 ))}
             </div>