refactor: new reusable draggable-item component and use it

apps/web/src/components/editor/media-panel/views/text.tsx

@@ -1,11 +1,25 @@
-import { Card } from "@/components/ui/card";
+import { DraggableMediaItem } from "@/components/ui/draggable-item";
 
 export function TextView() {
   return (
     <div className="p-4">
-      <Card className="flex items-center justify-center size-24">
-        <span className="text-xs select-none">Default text</span>
-      </Card>
+      <DraggableMediaItem
+        name="Default text"
+        preview={
+          <div className="flex items-center justify-center w-full h-full bg-accent rounded">
+            <span className="text-xs select-none">Default text</span>
+          </div>
+        }
+        dragData={{
+          id: "default-text",
+          type: "text",
+          name: "Default text",
+          content: "Default text",
+        }}
+        aspectRatio={1}
+        className="w-24"
+        showLabel={false}
+      />
     </div>
   );
 }