Battlesnake/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Assignment Page and Update Header; Replace Background Image

Browse source
This commit is contained in:
Anton Kupriianov 2025-04-21 18:11:43 -07:00
parent 9cd6ae4ccb
commit 8eedc7ed57
8 changed files with 312 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

107
src/pages/AssignmentPage.jsx Normal file
View file

@ -0,0 +1,107 @@
// Page - Assignment
import { useEffect, useState } from 'react';
import '../scss/styles.scss';
const AssignmentPage = () => {
const [files, setFiles] = useState([]);
useEffect(() => {
document.title = 'Assignment';
}, []);
const handleFileChange = (e) => {
if (e.target.files) {
const newFiles = Array.from(e.target.files);
setFiles(prevFiles => [...prevFiles, ...newFiles]);
}
};
const handleRemoveFile = (index) => {
setFiles(prevFiles => prevFiles.filter((_, i) => i !== index));
};
const handleSubmit = (e) => {
e.preventDefault();
// Here you would typically send the files to a server
console.log('Files to submit:', files);
alert('Assignment submitted successfully!');
};
return (
<main className="assignment-page">
<section>
<div className="assignment-header">
<h2>Assignment Submission</h2>
<div className="due-date">
<p>Due on Jan 16, 2025 11:59 PM</p>
</div>
</div>
<div className="assignment-container">
<div className="assignment-info">
<h3>Submit Assignment</h3>
<p className="files-count">({files.length}) file(s) to submit</p>
<p className="submission-note">After uploading, you must click Submit to complete the submission.</p>
</div>
<div className="file-upload-section">
<div className="upload-buttons">
<label className="file-upload-btn">
<input
type="file"
multiple
onChange={handleFileChange}
style={{ display: 'none' }}
/>
Add a File
</label>
<button className="record-audio-btn">Record Audio</button>
<button className="record-video-btn">Record Video</button>
</div>
{files.length > 0 && (
<div className="files-list">
<h4>Selected Files:</h4>
<ul>
{files.map((file, index) => (
<li key={index} className="file-item">
<span className="file-name">{file.name}</span>
<span className="file-size">({(file.size / 1024).toFixed(2)} KB)</span>
<button
className="remove-file-btn"
onClick={() => handleRemoveFile(index)}
>
Remove
</button>
</li>
))}
</ul>
</div>
)}
</div>
<div className="comments-section">
<h4>Comments</h4>
<textarea
placeholder="Add a comment (optional)"
rows="4"
></textarea>
</div>
<div className="submission-buttons">
<button
className="submit-btn"
onClick={handleSubmit}
disabled={files.length === 0}
>
Submit
</button>
<button className="cancel-btn">Cancel</button>
</div>
</div>
</section>
</main>
);
};
export default AssignmentPage;