Add ability to edit AI generated content

components/SortableQuestionCard.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { QuestionCard } from './QuestionCard';
+import { Question } from '../types';
+
+interface SortableQuestionCardProps {
+  question: Question;
+  index: number;
+  onEdit: () => void;
+  onDelete: () => void;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+}
+
+export const SortableQuestionCard: React.FC<SortableQuestionCardProps> = ({
+  question,
+  index,
+  onEdit,
+  onDelete,
+  isExpanded,
+  onToggleExpand
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: question.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 50 : undefined,
+    position: 'relative' as const
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes}>
+      <QuestionCard
+        question={question}
+        index={index}
+        onEdit={onEdit}
+        onDelete={onDelete}
+        isExpanded={isExpanded}
+        onToggleExpand={onToggleExpand}
+        isDragging={isDragging}
+        dragListeners={listeners}
+      />
+    </div>
+  );
+};