Reverted Level to only utas placement test exercises, Speaking, bug fixes, placeholder

src/components/ExamEditor/Shared/Passage.tsx

@@ -1,40 +1,49 @@
+import { useState } from "react";
 import Dropdown from "@/components/Dropdown";
 import clsx from "clsx";
 
 interface Props {
-    title: string;
-    content: string;
-    open: boolean;
-    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  title: string;
+  content: string;
+  open?: boolean;
+  setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const Passage: React.FC<Props> = ({ title, content, open, setIsOpen}) => {
-    const paragraphs = content.split('\n\n');
+const Passage: React.FC<Props> = ({ title, content, open: externalOpen, setIsOpen: externalSetIsOpen }) => {
+  const [internalOpen, setInternalOpen] = useState(false);
 
-    return (
-        <Dropdown
-            title={title}
+  const isOpen = externalOpen ?? internalOpen;
+  const setIsOpen = externalSetIsOpen ?? setInternalOpen;
+
+  const paragraphs = content.split('\n\n');
+
+  return (
+    <Dropdown
+      title={title}
+      className={clsx(
+        "bg-white p-6 w-full items-center",
+        isOpen ? "rounded-t-lg border-b border-gray-200" : "rounded-lg shadow-lg"
+      )}
+      titleClassName="text-2xl font-semibold text-gray-800"
+      contentWrapperClassName="p-6 bg-white rounded-b-lg shadow-md transition-all duration-300 ease-in-out"
+      open={isOpen}
+      setIsOpen={setIsOpen}
+    >
+      <div>
+        {paragraphs.map((paragraph, index) => (
+          <p
+            key={index}
             className={clsx(
-                "bg-white p-6 w-full items-center",
-                open ? "rounded-t-lg border-b border-gray-200" : "rounded-lg shadow-lg"
+              "text-justify",
+              index < paragraphs.length - 1 ? 'mb-4' : 'mb-6'
             )}
-            titleClassName="text-2xl font-semibold text-gray-800"
-            contentWrapperClassName="p-6 bg-white rounded-b-lg shadow-md transition-all duration-300 ease-in-out"
-            open={open}
-            setIsOpen={setIsOpen}
-        >
-            <div>
-                {paragraphs.map((paragraph, index) => (
-                    <p
-                        key={index}
-                        className={clsx("text-justify", index < paragraphs.length - 1 ? 'mb-4' : 'mb-6')}
-                    >
-                        {paragraph.trim()}
-                    </p>
-                ))}
-            </div>
-        </Dropdown>
-    );
+          >
+            {paragraph.trim()}
+          </p>
+        ))}
+      </div>
+    </Dropdown>
+  );
 }
 
 export default Passage;