Exam generation rework, batch user tables, fastapi endpoint switch

src/components/ExamEditor/Shared/Header.tsx

@@ -0,0 +1,71 @@
+import { Module } from "@/interfaces";
+import clsx from "clsx";
+import { ReactNode } from "react";
+import { MdDelete, MdEdit, MdEditOff, MdRefresh, MdSave } from "react-icons/md";
+
+interface Props {
+    title: string;
+    description: string;
+    editing: boolean;
+    module?: Module;
+    handleSave: () => void;
+    handleDiscard: () => void;
+    modeHandle?: () => void;
+    mode?: "delete" | "edit";
+    children?: ReactNode;
+}
+
+const Header: React.FC<Props> = ({ title, description, editing, handleSave, handleDiscard, modeHandle, children, mode = "delete", module }) => {
+    return (
+        <div className="flex justify-between items-center mb-6">
+            <div>
+                <h1 className="text-2xl font-bold text-gray-800">{title}</h1>
+                <p className="text-gray-600 mt-1">{description}</p>
+            </div>
+            <div className="flex gap-2">
+                {children}
+                <button
+                    onClick={handleSave}
+                    disabled={!editing}
+                    className={
+                        clsx("px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-200",
+                            editing ? 'bg-green-500 text-white hover:bg-green-600' : 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                        )}
+                >
+                    <MdSave size={18} />
+                    Save
+                </button>
+                <button
+                    onClick={handleDiscard}
+                    disabled={!editing}
+                    className={clsx(
+                        "px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-200",
+                        editing ? 'bg-gray-500 text-white hover:bg-gray-600' : 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                    )}
+                >
+                    <MdRefresh size={18} />
+                    Discard
+                </button>
+                {mode === "delete" ? (
+                    <button
+                        onClick={modeHandle}
+                        className="px-4 py-2 bg-white border border-red-500 text-red-500 hover:bg-red-50 rounded-lg transition-all duration-200 flex items-center gap-2"
+                    >
+                        <MdDelete size={18} />
+                        Delete
+                    </button>
+                ) : (
+                    <button
+                        onClick={modeHandle}
+                        className={`px-4 py-2 bg-ielts-${module}/80 text-white hover:bg-ielts-${module} rounded-lg transition-all duration-200 flex items-center gap-2`}
+                    >
+                        { editing ? <MdEditOff size={18} /> : <MdEdit size={18} /> } 
+                        Edit
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default Header;