Exam generation rework, batch user tables, fastapi endpoint switch

src/components/Low/AutoExpandingTextInput.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useRef, ChangeEvent } from 'react';
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+  placeholder?: string;
+}
+
+const AutoExpandingTextInput: React.FC<Props> = ({
+  value,
+  className,
+  onChange,
+  placeholder
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const measureRef = useRef<HTMLSpanElement>(null);
+
+  const adjustWidth = () => {
+    const input = inputRef.current;
+    const measure = measureRef.current;
+    if (input && measure) {
+      measure.textContent = input.value || placeholder || '';
+      input.style.width = `${measure.offsetWidth + 10}px`;
+    }
+  };
+
+  useEffect(() => {
+    adjustWidth();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, placeholder]);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+    adjustWidth();
+  };
+
+  return (
+    <div className="relative inline-block">
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        onChange={handleChange}
+        className={className}
+        placeholder={placeholder}
+        style={{ minWidth: '50px' }}
+      />
+      <span
+        ref={measureRef}
+        className="absolute invisible whitespace-pre"
+        style={{
+          font: 'inherit',
+          padding: '0 4px',
+          border: '2px solid transparent',
+        }}
+      />
+    </div>
+  );
+};
+
+export default AutoExpandingTextInput;