From 40c7fbb4f86130c83fbd9029e83c5e7550e3219d Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 6 Jul 2025 20:45:29 +0200
Subject: refactor: move to a typed-tracks system and add support for text

---
 apps/web/src/components/ui/draggable-item.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

(limited to 'apps/web/src/components/ui')

diff --git a/apps/web/src/components/ui/draggable-item.tsx b/apps/web/src/components/ui/draggable-item.tsx
index 4ec72d12..16518dde 100644
--- a/apps/web/src/components/ui/draggable-item.tsx
+++ b/apps/web/src/components/ui/draggable-item.tsx
@@ -7,11 +7,6 @@ import { createPortal } from "react-dom";
 import { Plus } from "lucide-react";
 import { cn } from "@/lib/utils";
 
-// Create the empty image once, outside the component
-const emptyImg = new Image();
-emptyImg.src =
-  "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
-
 export interface DraggableMediaItemProps {
   name: string;
   preview: ReactNode;
@@ -39,6 +34,10 @@ export function DraggableMediaItem({
   const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
   const dragRef = useRef<HTMLDivElement>(null);
 
+  const emptyImg = new window.Image();
+  emptyImg.src =
+    "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+
   useEffect(() => {
     if (!isDragging) return;
 
@@ -76,10 +75,9 @@ export function DraggableMediaItem({
 
   return (
     <>
-      <div ref={dragRef} className="relative group">
-        <Button
-          variant="outline"
-          className={`flex flex-col gap-1 p-0 h-auto w-full relative border-none !bg-transparent cursor-default ${className}`}
+      <div ref={dragRef} className="relative group w-28 h-28">
+        <div
+          className={`flex flex-col gap-1 p-0 h-auto w-full relative cursor-default ${className}`}
         >
           <AspectRatio
             ratio={aspectRatio}
@@ -108,7 +106,7 @@ export function DraggableMediaItem({
                 : name}
             </span>
           )}
-        </Button>
+        </div>
       </div>
 
       {/* Custom drag preview */}
-- 
cgit v1.3.1