refactor: new reusable draggable-item component and use it

1 files changed, 18 insertions, 4 deletions

diff --git a/apps/web/src/components/editor/media-panel/views/text.tsx b/apps/web/src/components/editor/media-panel/views/text.tsx
index 9e4f6190..ab698528 100644
--- a/apps/web/src/components/editor/media-panel/views/text.tsx
+++ b/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>

   );

 }