Working sorting kinda?

src/components/portfolio/images/SortableImageItem.tsx

@@ -0,0 +1,48 @@
+// src/components/portfolio/SortableImageItem.tsx
+"use client";
+
+import { PortfolioImage } from "@/generated/prisma";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import Image from "next/image";
+
+interface Props {
+  id: string;
+  image: PortfolioImage;
+}
+
+export default function SortableImageItem({ id, image }: Props) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      {...attributes}
+      {...listeners}
+      style={style}
+      className="bg-white rounded border overflow-hidden shadow hover:shadow-md transition"
+    >
+      <Image
+        src={`/api/image/thumbnail/${image.fileKey}.wepb`}
+        alt={image.altText ?? image.name}
+        width={300}
+        height={200}
+        className="object-cover w-full h-48"
+      />
+      <div className="px-2 py-1 text-sm text-center truncate">{image.name}</div>
+    </div>
+  );
+}