assignment page scss upadated

src/pages/AssignmentPage.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import "../scss/components/_assignment.scss";
+import { useEffect } from "react";
+
 
 const AssignmentPage = () => {
   const [studentName, setStudentName] = useState("");
@@ -13,6 +15,11 @@ const AssignmentPage = () => {
   const [showModal, setShowModal] = useState(false);
   const [editingIndex, setEditingIndex] = useState(null);
 
+  useEffect(() => {
+    document.title = "Assignment";
+  }, []);
+  
+
   const resetForm = () => {
     setStudentName("");
     setCampID("");
@@ -37,12 +44,10 @@ const AssignmentPage = () => {
     };
 
     if (editingIndex !== null) {
-      // Edit mode: update the project at the index
       const updatedProjects = [...projects];
       updatedProjects[editingIndex] = newProject;
       setProjects(updatedProjects);
     } else {
-      // New submission
       setProjects([...projects, newProject]);
     }
 
@@ -58,7 +63,7 @@ const AssignmentPage = () => {
     setProgramID(project.programID);
     setTitle(project.title);
     setDescription(project.description);
-    setFile(null); // File can't be set again for editing, usually. You could add note about this.
+    setFile(null);
     setEditingIndex(index);
     setShowModal(true);
   };
@@ -70,8 +75,10 @@ const AssignmentPage = () => {
 
   return (
     <div className="assignment-page">
-      <h2>📘 Assignments</h2>
-      <button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
+      <div className="assignment-header-box">
+        <h2>📘 Assignments</h2>
+        <button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
+      </div>
 
       {showModal && (
         <div className="modal-overlay">
@@ -80,110 +87,69 @@ const AssignmentPage = () => {
             <form onSubmit={handleSubmit}>
               <div>
                 <label>Student Name</label>
-                <input
-                  type="text"
-                  value={studentName}
-                  onChange={(e) => setStudentName(e.target.value)}
-                  required
-                />
+                <input type="text" value={studentName} onChange={(e) => setStudentName(e.target.value)} required />
               </div>
 
               <div>
                 <label>Camp ID</label>
-                <input
-                  type="text"
-                  value={campID}
-                  onChange={(e) => setCampID(e.target.value)}
-                  required
-                />
+                <input type="text" value={campID} onChange={(e) => setCampID(e.target.value)} required />
               </div>
 
               <div>
                 <label>Program ID</label>
-                <input
-                  type="text"
-                  value={programID}
-                  onChange={(e) => setProgramID(e.target.value)}
-                  required
-                />
+                <input type="text" value={programID} onChange={(e) => setProgramID(e.target.value)} required />
               </div>
 
               <div>
                 <label>Password</label>
-                <input
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
-                />
+                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
               </div>
 
               <div>
                 <label>Assignment Title</label>
-                <input
-                  type="text"
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                  required
-                />
+                <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} required />
               </div>
 
               <div>
                 <label>Description</label>
-                <textarea
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  required
-                ></textarea>
+                <textarea value={description} onChange={(e) => setDescription(e.target.value)} required></textarea>
               </div>
 
               <div>
                 <label>File Upload (optional)</label>
-                <input
-                  type="file"
-                  onChange={(e) => setFile(e.target.files[0])}
-                />
+                <input type="file" onChange={(e) => setFile(e.target.files[0])} />
               </div>
 
               <div className="modal-buttons">
                 <button type="submit">{editingIndex !== null ? "Update" : "Submit"}</button>
-                <button
-                  type="button"
-                  onClick={() => {
-                    resetForm();
-                    setShowModal(false);
-                  }}
-                >
-                  Cancel
-                </button>
+                <button type="button" onClick={() => { resetForm(); setShowModal(false); }}>Cancel</button>
               </div>
             </form>
           </div>
         </div>
       )}
 
-      <div className="project-list">
-  <h3>📋 Projects</h3>
-  {projects.map((project, index) => (
-    <div key={index} className="project-item">
-      <div className="project-meta">
-        <strong>Student Name: {project.studentName}</strong> | CampID: {project.campID} | ProgramID: {project.programID}
-      </div>
-      <h4>{project.title}</h4>
-      <p>{project.description}</p>
-      {project.fileName && (
-        <p><strong>Uploaded File:</strong> {project.fileName}</p>
+      {projects.length > 0 && (
+        <div className="project-list">
+          {/* <h3>📋 Projects</h3> */}
+          {projects.map((project, index) => (
+            <div key={index} className="project-item">
+              <div className="project-meta">
+                <strong>Student Name: {project.studentName}</strong> | CampID: {project.campID} | ProgramID: {project.programID}
+              </div>
+              <h4>{project.title}</h4>
+              <p>{project.description}</p>
+              {project.fileName && <p><strong>Uploaded File:</strong> {project.fileName}</p>}
+
+              <div className="action-buttons">
+                <button onClick={() => handleEdit(index)}>✏️ Edit</button>
+                <button onClick={() => handleDelete(index)}>🗑️ Delete</button>
+                <button onClick={() => alert("QR feature coming soon!")}>📎 QR</button>
+              </div>
+            </div>
+          ))}
+        </div>
       )}
-
-      <div className="action-buttons">
-        <button onClick={() => handleEdit(index)}>✏️ Edit</button>
-        <button onClick={() => handleDelete(index)}>🗑️ Delete</button>
-        <button onClick={() => alert("QR feature coming soon!")}>📎 QR</button>
-      </div>
-    </div>
-  ))}
-</div>
-
     </div>
   );
 };