Mantine overhaul

frontend/src/components/FileManager.js

@@ -0,0 +1,37 @@
+import React from "react";
+
+export default function FileManager({ files, setFiles, allowMultiple = true }) {
+  const handleFileUpload = (e) => {
+    const uploadedFiles = Array.from(e.target.files);
+    setFiles((prevFiles) => (allowMultiple ? [...prevFiles, ...uploadedFiles] : uploadedFiles));
+  };
+
+  const handleRemoveFile = (index) => {
+    setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div className="space-y-4 w-full max-w-3xl">
+      <input
+        type="file"
+        accept="application/pdf"
+        multiple={allowMultiple}
+        onChange={handleFileUpload}
+        className="block"
+      />
+      <ul className="list-disc pl-5 text-sm">
+        {files.map((file, index) => (
+          <li key={index} className="flex justify-between items-center">
+            {file.name}
+            <button
+              onClick={() => handleRemoveFile(index)}
+              className="text-red-600 hover:underline text-xs"
+            >
+              Remove
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

frontend/src/components/PageEditor.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function PageEditor({ pdfFile }) {
+  return (
+    <div className="w-full h-full flex items-center justify-center">
+      <p className="text-gray-500">Page Editor is under construction.</p>
+    </div>
+  );
+}

frontend/src/components/Viewer.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+export default function Viewer({ pdfFile, setPdfFile }) {
+  return pdfFile ? (
+    <iframe
+      src={pdfFile.url}
+      title="PDF Viewer"
+      className="w-full h-full border-none"
+    />
+  ) : (
+    <label className="cursor-pointer text-blue-600 underline">
+      Click to upload a PDF
+      <input
+        type="file"
+        accept="application/pdf"
+        onChange={(e) => {
+          const file = e.target.files[0];
+          if (file && file.type === "application/pdf") {
+            const fileUrl = URL.createObjectURL(file);
+            setPdfFile({ file, url: fileUrl });
+          }
+        }}
+        className="hidden"
+      />
+    </label>
+  );
+}