Exam generation rework, batch user tables, fastapi endpoint switch

src/components/ExamEditor/Shared/SectionDropdown.tsx

@@ -0,0 +1,84 @@
+import React, { useState, ReactNode, useRef, useEffect } from 'react';
+import { animated, useSpring } from '@react-spring/web';
+
+interface DropdownProps {
+    title: ReactNode;
+    open: boolean;
+    toggleOpen: () => void;
+    className: string;
+    children: ReactNode;
+}
+
+// Would be way too messy to add the center the title in the other Dropdown
+const SectionDropdown: React.FC<DropdownProps> = ({
+    title,
+    open,
+    className,
+    children,
+    toggleOpen
+}) => {
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [contentHeight, setContentHeight] = useState<number>(0);
+
+    useEffect(() => {
+        let resizeObserver: ResizeObserver | null = null;
+
+        if (contentRef.current) {
+            resizeObserver = new ResizeObserver(entries => {
+                for (let entry of entries) {
+                    if (entry.borderBoxSize && entry.borderBoxSize.length > 0) {
+                        const height = entry.borderBoxSize[0].blockSize;
+                        setContentHeight(height + 0);
+                    } else {
+                        // Fallback for browsers that don't support borderBoxSize
+                        const height = entry.contentRect.height;
+                        setContentHeight(height + 0);
+                    }
+                }
+            });
+
+            resizeObserver.observe(contentRef.current);
+        }
+
+        return () => {
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, []);
+
+    const springProps = useSpring({
+        height: open ? contentHeight : 0,
+        opacity: open ? 1 : 0,
+        config: { tension: 300, friction: 30 }
+    });
+
+    return (
+        <div>
+            <button
+                onClick={() => toggleOpen()}
+                className={className}
+            >
+                <div className='flex flex-row w-full items-center'>
+                    <p className='flex-grow'>{title}</p>
+                    <svg
+                        className={`w-4 h-4 transform transition-transform ${open ? 'rotate-180' : ''}`}
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                    </svg>
+                </div>
+            </button>
+            <animated.div style={springProps} className="overflow-hidden">
+                <div ref={contentRef}>
+                    {children}
+                </div>
+            </animated.div>
+        </div>
+    );
+};
+
+export default SectionDropdown;