+ {/* Dates */}
+
+ {deadlines.map((deadline: Deadline) => (
+
+ {new Date(deadline.date).toLocaleDateString('en-US', {
+ weekday: 'short',
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ })}
+
+ ))}
+
+
+ {/* Visual timeline */}
+
+ {/* Calculate the gradient stops based on deadline dates */}
+ {(() => {
+ const today = new Date();
+ const totalDeadlines = deadlines.length;
+
+ // Find the index where future dates begin
+ let futureStartIndex = deadlines.findIndex(d => new Date(d.date) > today);
+ if (futureStartIndex === -1) futureStartIndex = totalDeadlines; // All dates are in the past
+
+ // Calculate the percentage where the color should change
+ const changePoint = futureStartIndex / totalDeadlines * 100;
+
+ // Create the gradient style
+ const gradientStyle = {
+ background: `linear-gradient(to right,
+ var(--timeline-past-color, #ff0000) 0%,
+ var(--timeline-past-color, #ff0000) ${changePoint}%,
+ #D6DCE0 ${changePoint}%,
+ #D6DCE0 100%)`
+ };
+
+ return (
+
+ );
+ })()}
+
+
+ {deadlines.map((deadline: Deadline, index: number) => (
+
new Date() ? 'white' : undefined,
+ border: new Date(deadline.date) > new Date() ? '1px solid #E2E2E2' : undefined
+ }}
+ >
+ ))}
+
+
+
+{/* Deadlines/Links */}
+
+ {deadlines.map((deadline: Deadline) => {
+ // Check if the deadline is a Submission or Review deadline
+ const isNonClickable =
+ deadline.description === "Submission deadline" ||
+ deadline.description === "Review deadline";
+
+ // Conditionally render either a Link or a span
+ return isNonClickable ? (
+
+ {deadline.description}
+
+ ) : (
+
+ {deadline.description}
+
+ );
+ })}
+
+