Listening preview and some more patches

src/components/ExamEditor/Exercises/Shared/PromptEdit.tsx

@@ -0,0 +1,49 @@
+import AutoExpandingTextArea from "@/components/Low/AutoExpandingTextarea";
+import { Card, CardContent } from "@/components/ui/card";
+import { useState } from "react";
+import { MdEdit, MdEditOff } from "react-icons/md";
+
+interface Props {
+    value: string;
+    onChange: (text: string) => void;
+}
+
+
+const PromptEdit: React.FC<Props> = ({ value, onChange }) => {
+    const [editing, setEditing] = useState(false);
+    
+    return (
+        <>
+            <Card className="mb-6">
+                <CardContent className="p-4">
+                    <div className="flex justify-between items-start gap-4">
+                        {editing ? (
+                            <AutoExpandingTextArea
+                                className="flex-1 p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none min-h-[100px]"
+                                value={value}
+                                onChange={(text) => onChange(text)}
+                                onBlur={()=> setEditing(false)}
+                            />
+                        ) : (
+                            <div className="flex-1">
+                                <h3 className="font-medium text-gray-800 mb-2">Question/Instructions displayed to the student:</h3>
+                                <p className="text-gray-600">{value}</p>
+                            </div>
+                        )}
+                        <button
+                            onClick={() => setEditing(!editing)}
+                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                        >
+                            {editing ?
+                                <MdEditOff size={20} className="text-gray-500" /> :
+                                <MdEdit size={20} className="text-gray-500" />
+                            }
+                        </button>
+                    </div>
+                </CardContent>
+            </Card>
+        </>
+    );
+}
+
+export default PromptEdit;