-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #11 from TEDxNTUA/bug-fixing-giannis
Fix timeline bug, add 2025 year
- Loading branch information
Showing
8 changed files
with
185 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import React from "react"; | ||
| import TimelineEvent from "./TimelineEvent"; | ||
| import YearLine from "./YearLine"; | ||
|
|
||
| const Timeline = ({ events }) => { | ||
| return ( | ||
| <div className="relative flex flex-col w-full mx-auto"> | ||
| <YearLine numberOfYears={9} /> | ||
|
|
||
| <div | ||
| // className="relative flex items-center place-content-center w-full h-[600px] border-[rgba(255,255,255,0.2)] border-8" | ||
| className="ml-[10%] w-[90%] top-[-20px] absolute flex items-center mb-12" | ||
| > | ||
| <div className="w-1/6 text-center text-white"> | ||
| <div className="text-4xl font-bold">2025</div> | ||
| <p className=" text-white bg-black mx-auto"> | ||
| Stay upda<span className="text-our-red">TED</span>. More coming | ||
| soon! | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="ml-[10%] w-[90%] "> | ||
| {/* Render Timeline Events */} | ||
| {events.map((TedEvent, index) => ( | ||
| <TimelineEvent key={TedEvent.id} TedEvent={TedEvent} index={index} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Timeline; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import React from "react"; | ||
|
|
||
| const TimelineEvent = ({ TedEvent }) => { | ||
| const { link, logo, source, year, paragraph, index } = TedEvent; // Index added for bullet alignment | ||
| const isHoverable = Boolean(link); // Check if the link exists | ||
|
|
||
| return ( | ||
| <div | ||
| // className="relative flex items-center place-content-center w-full h-[600px] border-[rgba(255,255,255,0.2)] border-8" | ||
| className="relative flex flex-col xl:flex-row gap-8 xl:gap-0 items-center h-[600px] " | ||
| style={{ | ||
| top: `${index * 600}px`, // Align with the bullet position | ||
| }} | ||
| > | ||
| {/* Year Column */} | ||
|
|
||
| {/* <div className="text-4xl font-bold">2025</div> */} | ||
|
|
||
| {/* <div className="w-2/6"> */} | ||
| <div className="xl:w-1/6"> | ||
| {/* <div className="w-1/6 text-center text-4xl font-bold text-white mb-4 bg-[rgba(255,255,255,0.2)]"> */} | ||
| <div className="text-center text-white text-4xl font-bold ">{year}</div> | ||
| </div> | ||
|
|
||
| {/* Image Column */} | ||
| <div className="xl:w-3/6 flex justify-center"> | ||
| {link ? ( | ||
| <a | ||
| href={link} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="hover:cursor-pointer" | ||
| > | ||
| <img | ||
| src={`./previousEvents/${source}`} | ||
| alt={`${year} event`} | ||
| className="w-full max-w-xs rounded-lg border border-[#eb002733] hover:border-[#eb0027] transition duration-200 object-fill" | ||
| /> | ||
| </a> | ||
| ) : ( | ||
| <img | ||
| src={`./previousEvents/${source}`} | ||
| alt={`${year} event`} | ||
| className="w-full max-w-xs rounded-lg border border-[#eb002733] object-fill" | ||
| /> | ||
| )} | ||
| </div> | ||
|
|
||
| {/* Description Column */} | ||
| <div className="hidden xl:block w-2/6"> | ||
| <div className="text-gray-300 text-md leading-relaxed pl-6"> | ||
| {paragraph} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default TimelineEvent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| function YearLine({ numberOfYears }) { | ||
| return ( | ||
| // Vertical Line Bullets | ||
| <div className="absolute left-10 w-1 bg-red-500 h-full"> | ||
| <div className="absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-red-500 rounded-full"></div> | ||
|
|
||
| {/* Render Bullets */} | ||
| {Array.from({ length: numberOfYears }).map((_, index) => ( | ||
| <div | ||
| key={index} | ||
| className="absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-red-500 rounded-full" | ||
| style={{ | ||
| top: `${292 + index * 600}px`, // Start at 50vh, then increment by 100vh | ||
| }} | ||
| ></div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default YearLine; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters