Add ability to edit AI generated content

components/QuestionCard.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { GripVertical, ChevronDown, ChevronUp, Pencil, Trash2, Check, X, Triangle, Diamond, Circle, Square } from 'lucide-react';
+import { Question } from '../types';
+
+interface QuestionCardProps {
+  question: Question;
+  index: number;
+  onEdit: () => void;
+  onDelete: () => void;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+  isDragging?: boolean;
+  dragListeners?: any;
+}
+
+const ShapeIcon: React.FC<{ shape: string; className?: string }> = ({ shape, className }) => {
+  const props = { size: 16, className };
+  switch (shape) {
+    case 'triangle': return <Triangle {...props} />;
+    case 'diamond': return <Diamond {...props} />;
+    case 'circle': return <Circle {...props} />;
+    case 'square': return <Square {...props} />;
+    default: return <Circle {...props} />;
+  }
+};
+
+const colorMap: Record<string, string> = {
+  red: 'bg-red-500',
+  blue: 'bg-blue-500',
+  yellow: 'bg-yellow-500',
+  green: 'bg-green-500'
+};
+
+export const QuestionCard: React.FC<QuestionCardProps> = ({
+  question,
+  index,
+  onEdit,
+  onDelete,
+  isExpanded,
+  onToggleExpand,
+  isDragging,
+  dragListeners
+}) => {
+  const correctOption = question.options.find(o => o.isCorrect);
+  const truncatedText = question.text.length > 60 
+    ? question.text.slice(0, 60) + '...' 
+    : question.text;
+
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className={`bg-white rounded-2xl shadow-md border-2 transition-all ${
+        isDragging ? 'border-theme-primary shadow-lg scale-[1.02]' : 'border-gray-100'
+      }`}
+    >
+      <div 
+        className="flex items-center gap-3 p-4 cursor-pointer"
+        onClick={onToggleExpand}
+      >
+        <div 
+          className="text-gray-300 hover:text-gray-400 cursor-grab active:cursor-grabbing touch-none"
+          {...dragListeners}
+        >
+          <GripVertical size={20} />
+        </div>
+        
+        <div className="flex-shrink-0 w-8 h-8 bg-theme-primary text-white rounded-lg flex items-center justify-center font-black text-sm">
+          {index + 1}
+        </div>
+        
+        <div className="flex-1 min-w-0">
+          <p className="font-bold text-gray-800 truncate">{truncatedText}</p>
+        </div>
+        
+        {correctOption && (
+          <div className={`flex-shrink-0 px-3 py-1 rounded-full text-white text-xs font-bold flex items-center gap-1.5 ${colorMap[correctOption.color]}`}>
+            <ShapeIcon shape={correctOption.shape} className="fill-current" />
+            <span className="hidden sm:inline max-w-[100px] truncate">{correctOption.text}</span>
+          </div>
+        )}
+        
+        <div className="flex items-center gap-1 flex-shrink-0">
+          <button
+            onClick={(e) => { e.stopPropagation(); onEdit(); }}
+            className="p-2 text-gray-400 hover:text-theme-primary hover:bg-theme-primary/10 rounded-lg transition-colors"
+          >
+            <Pencil size={18} />
+          </button>
+          <button
+            onClick={(e) => { e.stopPropagation(); onDelete(); }}
+            className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+          >
+            <Trash2 size={18} />
+          </button>
+          <div className="p-2 text-gray-400">
+            {isExpanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
+          </div>
+        </div>
+      </div>
+      
+      <AnimatePresence>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <div className="px-4 pb-4 pt-0 border-t-2 border-gray-50">
+              <p className="text-gray-700 font-medium py-3">{question.text}</p>
+              
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                {question.options.map((option, idx) => (
+                  <div
+                    key={idx}
+                    className={`p-3 rounded-xl border-2 ${
+                      option.isCorrect 
+                        ? 'border-green-500 bg-green-50' 
+                        : 'border-gray-200 bg-gray-50'
+                    }`}
+                  >
+                    <div className="flex items-center gap-2">
+                      <div className={`w-6 h-6 rounded flex items-center justify-center ${colorMap[option.color]}`}>
+                        <ShapeIcon shape={option.shape} className="text-white fill-white" />
+                      </div>
+                      <span className={`font-bold flex-1 ${option.isCorrect ? 'text-green-700' : 'text-gray-700'}`}>
+                        {option.text}
+                      </span>
+                      {option.isCorrect ? (
+                        <Check size={18} className="text-green-500" />
+                      ) : (
+                        <X size={18} className="text-gray-300" />
+                      )}
+                    </div>
+                    {option.reason && (
+                      <p className="text-xs text-gray-500 mt-2 pl-8">{option.reason}</p>
+                    )}
+                  </div>
+                ))}
+              </div>
+              
+              <div className="mt-3 flex items-center gap-4 text-sm text-gray-500">
+                <span>Time limit: <strong>{question.timeLimit}s</strong></span>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+};