77 lines
3.0 KiB
TypeScript
77 lines
3.0 KiB
TypeScript
import { format } from 'date-fns';
|
|
import { AlertCircle, Calendar, CheckCircle, Clock, FileText } from 'lucide-react';
|
|
import { Renderer } from 'richtor';
|
|
import 'richtor/styles';
|
|
|
|
interface Props {
|
|
assignment: CourseAssignment;
|
|
deadlinePassed: boolean;
|
|
}
|
|
|
|
const AssignmentDetails = ({ assignment, deadlinePassed }: Props) => {
|
|
const formatDate = (date: string) => format(new Date(date), 'MMM d, yyyy');
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Assignment Info */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="flex items-center gap-3 rounded-lg border p-4">
|
|
<Calendar className="text-primary h-5 w-5" />
|
|
<div>
|
|
<p className="text-muted-foreground text-sm">Deadline</p>
|
|
<p className="font-medium">{formatDate(assignment.deadline)}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 rounded-lg border p-4">
|
|
<FileText className="text-primary h-5 w-5" />
|
|
<div>
|
|
<p className="text-muted-foreground text-sm">Total Marks</p>
|
|
<p className="font-medium">{assignment.total_mark}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 rounded-lg border p-4">
|
|
<CheckCircle className="text-primary h-5 w-5" />
|
|
<div>
|
|
<p className="text-muted-foreground text-sm">Pass Marks</p>
|
|
<p className="font-medium">{assignment.pass_mark}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 rounded-lg border p-4">
|
|
<Clock className="text-primary h-5 w-5" />
|
|
<div>
|
|
<p className="text-muted-foreground text-sm">Retake Allowed</p>
|
|
<p className="font-medium">
|
|
{assignment.retake} {assignment.retake > 1 ? 'times' : 'time'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Deadline Warning */}
|
|
{deadlinePassed && (
|
|
<div className="bg-destructive/10 border-destructive/20 rounded-lg border p-4">
|
|
<div className="text-destructive flex items-center gap-2">
|
|
<AlertCircle className="h-5 w-5" />
|
|
<p className="font-medium">Deadline expired</p>
|
|
</div>
|
|
<p className="text-muted-foreground mt-1 text-sm">
|
|
{assignment.late_submission
|
|
? `Late submission is allowed until ${formatDate(assignment.late_deadline || '')} with ${assignment.late_total_mark} marks.`
|
|
: 'Late submission is not allowed for this assignment.'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Overview Section */}
|
|
{assignment.summary && (
|
|
<>
|
|
<h3 className="text-lg font-semibold">OVERVIEW</h3>
|
|
<Renderer value={assignment.summary} />
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AssignmentDetails;
|